@sanity/vision 5.31.0-next.42 → 5.31.0-next.46

package/lib/_chunks-es/SanityVision.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { useTranslation, useKeyValueStore, useDateTimeFormat, ContextMenuButton, Translate, usePerspective, useDataset, useScheduledDraftsEnabled, useActiveReleases, useWorkspace, sortReleases, useClient, isCardinalityOneRelease, getReleaseIdFromReleaseDocumentId } from "sanity";
-import { Spinner, rem, useTheme, Flex, Card, Label, Box, Text, Tooltip, Stack, useToast, TextInput, MenuButton, Menu, MenuItem, Code, Button, Hotkeys, useClickOutsideEvent, Popover, Inline, Badge, Grid, Select, Container, Heading } from "@sanity/ui";
+import { useTranslation, useKeyValueStore, useClient, useCurrentUser, useDateTimeFormat, ContextMenuButton, UserAvatar, Translate, usePerspective, useDataset, useScheduledDraftsEnabled, useActiveReleases, useWorkspace, sortReleases, isCardinalityOneRelease, getReleaseIdFromReleaseDocumentId } from "sanity";
+import { Spinner, rem, useTheme, Flex, Card, Label, Box, Text, Tooltip, Stack, useToast, TextInput, MenuButton, Menu, MenuItem, Code, Badge, Button, Dialog, Tab, TabList, Hotkeys, useClickOutsideEvent, Popover, Inline, Grid, Select, Container, Heading } from "@sanity/ui";
 import { useState, useEffect, forwardRef, useRef, useImperativeHandle, Fragment, useEffectEvent, Component } from "react";
 import { SplitPane } from "@rexxars/react-split-pane";
-import { ErrorOutlineIcon, TrashIcon, AddIcon, SearchIcon, StopIcon, PlayIcon, HelpCircleIcon, CopyIcon, LinkIcon, DocumentSheetIcon, ChevronLeftIcon, ChevronRightIcon } from "@sanity/icons";
+import { ErrorOutlineIcon, UsersIcon, UnpublishIcon, TrashIcon, LockIcon, AddIcon, SearchIcon, StopIcon, PlayIcon, HelpCircleIcon, CopyIcon, LinkIcon, DocumentSheetIcon, ChevronLeftIcon, ChevronRightIcon } from "@sanity/icons";
 import { isHotkey } from "is-hotkey-esm";
 import { closeBrackets } from "@codemirror/autocomplete";
 import { history, defaultKeymap, historyKeymap } from "@codemirror/commands";
@@ -313,13 +313,13 @@ Root.displayName = "Root";
 const Header = styled(Card).withConfig({
   displayName: "Header",
   componentId: "sc-r315za-1"
-})`border-bottom:1px solid var(--card-border-color);`, StyledLabel = styled(Label).withConfig({
+})`position:relative;flex-shrink:0;z-index:6;background:var(--card-bg-color);overflow:visible;border-bottom:1px solid var(--card-border-color);`, StyledLabel = styled(Label).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-r315za-2"
 })`flex:1;`, SplitpaneContainer = styled(Box).withConfig({
   displayName: "SplitpaneContainer",
   componentId: "sc-r315za-3"
-})`position:relative;`, QueryCopyLink = styled.a.withConfig({
+})`position:relative;min-height:0;z-index:1;`, QueryCopyLink = styled.a.withConfig({
   displayName: "QueryCopyLink",
   componentId: "sc-r315za-4"
 })`cursor:pointer;margin-right:auto;`, InputBackgroundContainer = styled(Box).withConfig({
@@ -358,7 +358,7 @@ const Header = styled(Card).withConfig({
 })`position:relative;width:100%;height:100%;z-index:20;`, ResultFooter = styled(Flex).withConfig({
   displayName: "ResultFooter",
   componentId: "sc-r315za-12"
-})`border-top:1px solid var(--card-border-color);`, TimingsCard = styled(Card).withConfig({
+})`border-top:1px solid var(--card-border-color);flex-wrap:wrap;`, TimingsCard = styled(Card).withConfig({
   displayName: "TimingsCard",
   componentId: "sc-r315za-13"
 })`position:relative;`, TimingsTextContainer = styled(Flex).withConfig({
@@ -372,7 +372,7 @@ const Header = styled(Card).withConfig({
 })`position:relative;`, SaveResultLabel = styled(Text).withConfig({
   displayName: "SaveResultLabel",
   componentId: "sc-r315za-16"
-})`transform:initial;&:before,&:after{content:none;}> span{display:flex !important;gap:${({
+})`transform:initial;&:before,&:after{content:none;}> span{display:flex !important;flex-wrap:wrap;gap:${({
   theme
 }) => rem(theme.sanity.space[3])};align-items:center;}`, ControlsContainer = styled(Box).withConfig({
   displayName: "ControlsContainer",
@@ -426,30 +426,110 @@ function parseParams(value, t) {
     error: validationError
   };
 }
-const STORED_QUERIES_NAMESPACE = "studio.vision-tool.saved-queries", defaultValue = {
+const STORED_QUERIES_NAMESPACE = "studio.vision-tool.saved-queries", SHARED_QUERY_DOCUMENT_TYPE = "vision.sharedQuery", SHARED_QUERIES_QUERY = `*[_type == $sharedQueryType]{
+  _id,
+  authorId,
+  savedAt,
+  title,
+  url
+} | order(savedAt desc)`, SHARED_QUERY_LISTEN_OPTIONS = {
+  events: ["welcome", "mutation", "reconnect"],
+  includeResult: !0,
+  visibility: "query"
+}, defaultValue = {
   queries: []
 }, keyValueStoreKey = STORED_QUERIES_NAMESPACE;
 function useSavedQueries() {
-  const $ = c(27), keyValueStore = useKeyValueStore(), [value, setValue] = useState(defaultValue), [saving, setSaving] = useState(!1);
+  const $ = c(45), keyValueStore = useKeyValueStore();
   let t0;
-  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = [], $[0] = t0) : t0 = $[0];
-  const [deleting, setDeleting] = useState(t0), [saveQueryError, setSaveQueryError] = useState(), [deleteQueryError, setDeleteQueryError] = useState(), [error, setError] = useState();
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = {
+    apiVersion: DEFAULT_API_VERSION
+  }, $[0] = t0) : t0 = $[0];
+  const workspaceClient = useClient(t0), currentUser = useCurrentUser(), [value, setValue] = useState(defaultValue);
   let t1;
-  $[1] !== keyValueStore ? (t1 = keyValueStore.getKey(keyValueStoreKey), $[1] = keyValueStore, $[2] = t1) : t1 = $[2];
-  const queries = t1;
+  $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[1] = t1) : t1 = $[1];
+  const [sharedQueries, setSharedQueries] = useState(t1), [saving, setSaving] = useState(!1);
   let t2;
-  $[3] !== queries ? (t2 = () => {
-    const sub = queries.pipe(startWith(defaultValue), map(_temp$5)).subscribe({
+  $[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[2] = t2) : t2 = $[2];
+  const [deleting, setDeleting] = useState(t2), [saveQueryError, setSaveQueryError] = useState(), [deleteQueryError, setDeleteQueryError] = useState(), [error, setError] = useState();
+  let t3;
+  $[3] !== keyValueStore ? (t3 = keyValueStore.getKey(keyValueStoreKey), $[3] = keyValueStore, $[4] = t3) : t3 = $[4];
+  const personalQueries = t3;
+  let t4;
+  $[5] !== currentUser?.id ? (t4 = (docs) => {
+    const currentUserId = currentUser?.id;
+    return docs.map((doc) => ({
+      _key: doc._id,
+      authorId: doc.authorId,
+      isOwnedByCurrentUser: doc.authorId === currentUserId,
+      savedAt: doc.savedAt,
+      shared: !0,
+      title: doc.title,
+      url: doc.url
+    }));
+  }, $[5] = currentUser?.id, $[6] = t4) : t4 = $[6];
+  const mapSharedQueries = t4;
+  let t5, t6;
+  $[7] !== personalQueries ? (t5 = () => {
+    const sub = personalQueries.pipe(startWith(defaultValue), map(_temp$5)).subscribe({
       next: setValue,
       error: (err) => setError(err)
     });
     return () => sub?.unsubscribe();
-  }, $[3] = queries, $[4] = t2) : t2 = $[4];
-  let t3;
-  $[5] !== keyValueStore || $[6] !== queries ? (t3 = [queries, keyValueStore], $[5] = keyValueStore, $[6] = queries, $[7] = t3) : t3 = $[7], useEffect(t2, t3);
-  let t4;
-  $[8] !== keyValueStore || $[9] !== value.queries ? (t4 = async (query) => {
-    setSaving(!0), setSaveQueryError(void 0);
+  }, t6 = [personalQueries], $[7] = personalQueries, $[8] = t5, $[9] = t6) : (t5 = $[8], t6 = $[9]), useEffect(t5, t6);
+  let t7, t8;
+  $[10] !== mapSharedQueries || $[11] !== workspaceClient ? (t7 = () => {
+    let cancelled = !1;
+    const fetchSharedQueries = async () => {
+      const nextDocs = await workspaceClient.fetch(SHARED_QUERIES_QUERY, {
+        sharedQueryType: SHARED_QUERY_DOCUMENT_TYPE
+      }) || [];
+      cancelled || setSharedQueries(mapSharedQueries(nextDocs));
+    };
+    fetchSharedQueries().catch((err_0) => {
+      cancelled || setError(err_0);
+    });
+    const sub_0 = workspaceClient.observable.listen("*[_type == $sharedQueryType]", {
+      sharedQueryType: SHARED_QUERY_DOCUMENT_TYPE
+    }, SHARED_QUERY_LISTEN_OPTIONS).subscribe({
+      next: () => {
+        fetchSharedQueries().catch((err_1) => {
+          cancelled || setError(err_1);
+        });
+      },
+      error: (err_2) => {
+        cancelled || setError(err_2);
+      }
+    });
+    return () => {
+      cancelled = !0, sub_0.unsubscribe();
+    };
+  }, t8 = [workspaceClient, mapSharedQueries], $[10] = mapSharedQueries, $[11] = workspaceClient, $[12] = t7, $[13] = t8) : (t7 = $[12], t8 = $[13]), useEffect(t7, t8);
+  let t9;
+  $[14] !== sharedQueries || $[15] !== value.queries ? (t9 = [...sharedQueries, ...value.queries].sort(_temp2$4), $[14] = sharedQueries, $[15] = value.queries, $[16] = t9) : t9 = $[16];
+  const queries = t9;
+  let t10;
+  $[17] !== currentUser || $[18] !== keyValueStore || $[19] !== mapSharedQueries || $[20] !== value.queries || $[21] !== workspaceClient ? (t10 = async (query) => {
+    if (setSaving(!0), setSaveQueryError(void 0), query.shared) {
+      if (!currentUser?.id) {
+        const authError = new Error("No current user found. Unable to save shared query.");
+        throw setSaveQueryError(authError), setSaving(!1), authError;
+      }
+      try {
+        const createdDoc = await workspaceClient.create({
+          _type: SHARED_QUERY_DOCUMENT_TYPE,
+          authorId: currentUser.id,
+          savedAt: query.savedAt,
+          title: query.title,
+          url: query.url
+        });
+        setSharedQueries((prev) => [...mapSharedQueries([createdDoc]), ...prev]), setSaving(!1);
+        return;
+      } catch (t112) {
+        const err_3 = t112, saveError = err_3 instanceof Error ? err_3 : new Error(String(err_3));
+        throw setSaveQueryError(saveError), setSaving(!1), saveError;
+      }
+    }
     try {
       const newQueries = [{
         ...query,
@@ -460,15 +540,33 @@ function useSavedQueries() {
       }), await keyValueStore.setKey(keyValueStoreKey, {
         queries: newQueries
       });
-    } catch (t52) {
-      setSaveQueryError(t52);
+    } catch (t122) {
+      const err_4 = t122, saveError_0 = err_4 instanceof Error ? err_4 : new Error(String(err_4));
+      throw setSaveQueryError(saveError_0), setSaving(!1), saveError_0;
     }
     setSaving(!1);
-  }, $[8] = keyValueStore, $[9] = value.queries, $[10] = t4) : t4 = $[10];
-  const saveQuery = t4;
-  let t5;
-  $[11] !== keyValueStore || $[12] !== value.queries ? (t5 = async (query_0) => {
-    setSaving(!0), setSaveQueryError(void 0);
+  }, $[17] = currentUser, $[18] = keyValueStore, $[19] = mapSharedQueries, $[20] = value.queries, $[21] = workspaceClient, $[22] = t10) : t10 = $[22];
+  const saveQuery = t10;
+  let t11;
+  $[23] !== currentUser || $[24] !== keyValueStore || $[25] !== mapSharedQueries || $[26] !== value.queries || $[27] !== workspaceClient ? (t11 = async (query_0) => {
+    if (setSaving(!0), setSaveQueryError(void 0), query_0.shared) {
+      if (!currentUser?.id || query_0.authorId !== currentUser.id) {
+        const authError_0 = new Error("Only the author can update a shared query.");
+        throw setSaveQueryError(authError_0), setSaving(!1), authError_0;
+      }
+      try {
+        const updatedDoc = await workspaceClient.patch(query_0._key).set({
+          savedAt: query_0.savedAt,
+          title: query_0.title,
+          url: query_0.url
+        }).commit(), [updatedSharedQuery] = mapSharedQueries([updatedDoc]);
+        setSharedQueries((prev_0) => prev_0.map((existingQuery) => existingQuery._key === query_0._key ? updatedSharedQuery : existingQuery)), setSaving(!1);
+        return;
+      } catch (t122) {
+        const err_5 = t122, updateError = err_5 instanceof Error ? err_5 : new Error(String(err_5));
+        throw setSaveQueryError(updateError), setSaving(!1), updateError;
+      }
+    }
     try {
       const updatedQueries = value.queries.map((q) => q._key === query_0._key ? {
         ...q,
@@ -479,15 +577,30 @@ function useSavedQueries() {
       }), await keyValueStore.setKey(keyValueStoreKey, {
         queries: updatedQueries
       });
-    } catch (t62) {
-      setSaveQueryError(t62);
+    } catch (t132) {
+      const err_6 = t132, updateError_0 = err_6 instanceof Error ? err_6 : new Error(String(err_6));
+      throw setSaveQueryError(updateError_0), setSaving(!1), updateError_0;
     }
     setSaving(!1);
-  }, $[11] = keyValueStore, $[12] = value.queries, $[13] = t5) : t5 = $[13];
-  const updateQuery = t5;
-  let t6;
-  $[14] !== keyValueStore || $[15] !== value.queries ? (t6 = async (key) => {
-    setDeleting((prev) => [...prev, key]), setDeleteQueryError(void 0);
+  }, $[23] = currentUser, $[24] = keyValueStore, $[25] = mapSharedQueries, $[26] = value.queries, $[27] = workspaceClient, $[28] = t11) : t11 = $[28];
+  const updateQuery = t11;
+  let t12;
+  $[29] !== currentUser || $[30] !== keyValueStore || $[31] !== sharedQueries || $[32] !== value.queries || $[33] !== workspaceClient ? (t12 = async (key) => {
+    setDeleting((prev_1) => [...prev_1, key]), setDeleteQueryError(void 0);
+    const clearDeleting = () => setDeleting((prev_2) => prev_2.filter((k) => k !== key)), sharedQuery = sharedQueries.find((query_1) => query_1._key === key && query_1.shared);
+    if (sharedQuery) {
+      if (!currentUser?.id || sharedQuery.authorId !== currentUser.id) {
+        setDeleteQueryError(new Error("Only the author can delete a shared query.")), clearDeleting();
+        return;
+      }
+      try {
+        await workspaceClient.delete(key), setSharedQueries((prev_3) => prev_3.filter((query_2) => query_2._key !== key));
+      } catch (t132) {
+        setDeleteQueryError(t132);
+      }
+      clearDeleting();
+      return;
+    }
     try {
       const filteredQueries = value.queries.filter((q_0) => q_0._key !== key);
       setValue({
@@ -495,15 +608,15 @@ function useSavedQueries() {
       }), await keyValueStore.setKey(keyValueStoreKey, {
         queries: filteredQueries
       });
-    } catch (t72) {
-      setDeleteQueryError(t72);
+    } catch (t14) {
+      setDeleteQueryError(t14);
     }
-    setDeleting((prev_0) => prev_0.filter((k) => k !== key));
-  }, $[14] = keyValueStore, $[15] = value.queries, $[16] = t6) : t6 = $[16];
-  const deleteQuery = t6;
-  let t7;
-  return $[17] !== deleteQuery || $[18] !== deleteQueryError || $[19] !== deleting || $[20] !== error || $[21] !== saveQuery || $[22] !== saveQueryError || $[23] !== saving || $[24] !== updateQuery || $[25] !== value.queries ? (t7 = {
-    queries: value.queries,
+    clearDeleting();
+  }, $[29] = currentUser, $[30] = keyValueStore, $[31] = sharedQueries, $[32] = value.queries, $[33] = workspaceClient, $[34] = t12) : t12 = $[34];
+  const deleteQuery = t12;
+  let t13;
+  return $[35] !== deleteQuery || $[36] !== deleteQueryError || $[37] !== deleting || $[38] !== error || $[39] !== queries || $[40] !== saveQuery || $[41] !== saveQueryError || $[42] !== saving || $[43] !== updateQuery ? (t13 = {
+    queries,
     saveQuery,
     updateQuery,
     deleteQuery,
@@ -512,7 +625,10 @@ function useSavedQueries() {
     saveQueryError,
     deleteQueryError,
     error
-  }, $[17] = deleteQuery, $[18] = deleteQueryError, $[19] = deleting, $[20] = error, $[21] = saveQuery, $[22] = saveQueryError, $[23] = saving, $[24] = updateQuery, $[25] = value.queries, $[26] = t7) : t7 = $[26], t7;
+  }, $[35] = deleteQuery, $[36] = deleteQueryError, $[37] = deleting, $[38] = error, $[39] = queries, $[40] = saveQuery, $[41] = saveQueryError, $[42] = saving, $[43] = updateQuery, $[44] = t13) : t13 = $[44], t13;
+}
+function _temp2$4(a, b) {
+  return new Date(b.savedAt || 0).getTime() - new Date(a.savedAt || 0).getTime();
 }
 function _temp$5(data) {
   return data || defaultValue;
@@ -525,48 +641,53 @@ const FixedHeader = styled(Stack).withConfig({
 }) => theme.sanity.color.base.bg};z-index:1;`, ScrollContainer = styled(Box).withConfig({
   displayName: "ScrollContainer",
   componentId: "sc-14q7beb-1"
-})`height:100%;overflow-y:auto;overflow-x:hidden;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background:${({
-  theme
-}) => theme.sanity.color.base.border};border-radius:4px;}`;
+})`height:auto;width:100%;min-width:0;overflow:visible;`;
 function QueryRecall(t0) {
-  const $ = c(80), {
+  const $ = c(130), {
     url,
     getStateFromUrl,
     setStateFromParsedUrl,
     currentQuery,
     currentParams,
-    generateUrl
-  } = t0, toast = useToast(), {
+    generateUrl,
+    compactMode: t1
+  } = t0, compactMode = t1 === void 0 ? !1 : t1, toast = useToast(), {
     saveQuery,
     updateQuery,
     queries,
     deleteQuery,
-    saving,
-    saveQueryError
+    saving
   } = useSavedQueries(), {
     t
   } = useTranslation(visionLocaleNamespace);
-  let t1;
-  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = {
+  let t2;
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = {
     month: "short",
     day: "numeric",
     year: "numeric",
     hour: "numeric",
     minute: "2-digit",
     hour12: !0
-  }, $[0] = t1) : t1 = $[0];
-  const formatDate = useDateTimeFormat(t1), [editingKey, setEditingKey] = useState(null), [editingTitle, setEditingTitle] = useState("");
-  let t2;
-  $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[1] = t2) : t2 = $[1];
-  const [optimisticTitles, setOptimisticTitles] = useState(t2), [searchQuery, setSearchQuery] = useState(""), [selectedUrl, setSelectedUrl] = useState(url);
+  }, $[0] = t2) : t2 = $[0];
+  const formatDate = useDateTimeFormat(t2), [editingKey, setEditingKey] = useState(null), [editingTitle, setEditingTitle] = useState("");
   let t3;
-  $[2] !== currentParams || $[3] !== currentQuery || $[4] !== formatDate || $[5] !== generateUrl || $[6] !== getStateFromUrl || $[7] !== queries || $[8] !== saveQuery || $[9] !== saveQueryError || $[10] !== t || $[11] !== toast ? (t3 = async () => {
+  $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t3 = {}, $[1] = t3) : t3 = $[1];
+  const [optimisticTitles, setOptimisticTitles] = useState(t3), [searchQuery, setSearchQuery] = useState(""), [queryFilter, setQueryFilter] = useState("all"), [selectedUrl, setSelectedUrl] = useState(url);
+  let t4;
+  $[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t4 = [], $[2] = t4) : t4 = $[2];
+  const [pendingUnshareKeys, setPendingUnshareKeys] = useState(t4), [shareDialogQuery, setShareDialogQuery] = useState(null);
+  let t5;
+  $[3] !== currentParams || $[4] !== currentQuery || $[5] !== formatDate || $[6] !== generateUrl || $[7] !== getStateFromUrl || $[8] !== queries || $[9] !== saveQuery || $[10] !== t || $[11] !== toast ? (t5 = async () => {
     const newUrl = generateUrl(currentQuery, currentParams);
     if (queries?.some((q) => {
+      if (q.shared)
+        return !1;
       const savedQueryObj = getStateFromUrl(q.url);
       return savedQueryObj && savedQueryObj.query === currentQuery && isEqual(savedQueryObj.params, currentParams);
     })) {
       const duplicateQuery = queries?.find((q_0) => {
+        if (q_0.shared)
+          return !1;
         const savedQueryObj_0 = getStateFromUrl(q_0.url);
         return savedQueryObj_0 && savedQueryObj_0.query === currentQuery && isEqual(savedQueryObj_0.params, currentParams);
       });
@@ -578,65 +699,145 @@ function QueryRecall(t0) {
       });
       return;
     }
-    newUrl && (await saveQuery({
-      url: newUrl,
-      savedAt: (/* @__PURE__ */ new Date()).toISOString(),
-      title: "Untitled"
-    }), setSelectedUrl(newUrl)), saveQueryError ? toast.push({
-      closable: !0,
-      status: "error",
-      title: t("save-query.error"),
-      description: saveQueryError.message
-    }) : toast.push({
-      closable: !0,
-      status: "success",
-      title: t("save-query.success")
-    });
-  }, $[2] = currentParams, $[3] = currentQuery, $[4] = formatDate, $[5] = generateUrl, $[6] = getStateFromUrl, $[7] = queries, $[8] = saveQuery, $[9] = saveQueryError, $[10] = t, $[11] = toast, $[12] = t3) : t3 = $[12];
-  const handleSave = t3;
-  let t4;
-  $[13] !== t || $[14] !== toast || $[15] !== updateQuery ? (t4 = async (query, newTitle) => {
-    setEditingKey(null), setOptimisticTitles((prev) => ({
-      ...prev,
-      [query._key]: newTitle
+    if (newUrl)
+      try {
+        await saveQuery({
+          shared: !1,
+          url: newUrl,
+          savedAt: (/* @__PURE__ */ new Date()).toISOString(),
+          title: t("label.untitled-query")
+        }), setSelectedUrl(newUrl), toast.push({
+          closable: !0,
+          status: "success",
+          title: t("save-query.success")
+        });
+      } catch (t62) {
+        const err = t62;
+        toast.push({
+          closable: !0,
+          status: "error",
+          title: t("save-query.error"),
+          description: err instanceof Error ? err.message : String(err)
+        });
+      }
+  }, $[3] = currentParams, $[4] = currentQuery, $[5] = formatDate, $[6] = generateUrl, $[7] = getStateFromUrl, $[8] = queries, $[9] = saveQuery, $[10] = t, $[11] = toast, $[12] = t5) : t5 = $[12];
+  const handleSave = t5;
+  let t6;
+  $[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t6 = (query) => {
+    setShareDialogQuery(query);
+  }, $[13] = t6) : t6 = $[13];
+  const handleShareQuery = t6;
+  let t7;
+  $[14] !== deleteQuery || $[15] !== saveQuery || $[16] !== shareDialogQuery || $[17] !== t || $[18] !== toast ? (t7 = async () => {
+    if (!shareDialogQuery)
+      return;
+    const sharedQueryKey = shareDialogQuery._key, sharedQueryUrl = shareDialogQuery.url, sharedQueryTitle = shareDialogQuery.title || t("label.untitled-query");
+    try {
+      await saveQuery({
+        shared: !0,
+        title: sharedQueryTitle,
+        url: sharedQueryUrl,
+        savedAt: (/* @__PURE__ */ new Date()).toISOString()
+      }), await deleteQuery(sharedQueryKey), toast.push({
+        closable: !0,
+        status: "success",
+        title: t("save-query.shared-success")
+      });
+    } catch (t82) {
+      const err_0 = t82;
+      toast.push({
+        closable: !0,
+        status: "error",
+        title: t("save-query.error"),
+        description: err_0 instanceof Error ? err_0.message : String(err_0)
+      });
+    }
+    setShareDialogQuery(null);
+  }, $[14] = deleteQuery, $[15] = saveQuery, $[16] = shareDialogQuery, $[17] = t, $[18] = toast, $[19] = t7) : t7 = $[19];
+  const handleConfirmShareQuery = t7;
+  let t8;
+  $[20] !== deleteQuery || $[21] !== formatDate || $[22] !== getStateFromUrl || $[23] !== queries || $[24] !== saveQuery || $[25] !== t || $[26] !== toast ? (t8 = async (query_0) => {
+    setPendingUnshareKeys((prev) => [...prev, query_0._key]);
+    const clearPending = () => setPendingUnshareKeys((prev_0) => prev_0.filter((key) => key !== query_0._key)), nextQueryObj = getStateFromUrl(query_0.url), duplicatePersonalQuery = queries?.find((existingQuery) => {
+      if (existingQuery._key === query_0._key || existingQuery.shared)
+        return !1;
+      const existingQueryObj = getStateFromUrl(existingQuery.url);
+      return nextQueryObj && existingQueryObj && existingQueryObj.query === nextQueryObj.query && isEqual(existingQueryObj.params, nextQueryObj.params);
+    }), unsharedQueryTitle = query_0.title || t("label.untitled-query");
+    if (duplicatePersonalQuery) {
+      toast.push({
+        closable: !0,
+        status: "warning",
+        title: t("save-query.already-saved"),
+        description: `${duplicatePersonalQuery.title} - ${formatDate.format(new Date(duplicatePersonalQuery.savedAt || ""))}`
+      }), clearPending();
+      return;
+    }
+    try {
+      await saveQuery({
+        shared: !1,
+        title: unsharedQueryTitle,
+        url: query_0.url,
+        savedAt: (/* @__PURE__ */ new Date()).toISOString()
+      }), await deleteQuery(query_0._key), toast.push({
+        closable: !0,
+        status: "success",
+        title: t("save-query.unshared-success")
+      }), clearPending();
+    } catch (t92) {
+      const err_1 = t92;
+      toast.push({
+        closable: !0,
+        status: "error",
+        title: t("save-query.error"),
+        description: err_1 instanceof Error ? err_1.message : String(err_1)
+      }), clearPending();
+    }
+  }, $[20] = deleteQuery, $[21] = formatDate, $[22] = getStateFromUrl, $[23] = queries, $[24] = saveQuery, $[25] = t, $[26] = toast, $[27] = t8) : t8 = $[27];
+  const handleUnshareQuery = t8;
+  let t9;
+  $[28] !== t || $[29] !== toast || $[30] !== updateQuery ? (t9 = async (query_1, newTitle) => {
+    setEditingKey(null), setOptimisticTitles((prev_1) => ({
+      ...prev_1,
+      [query_1._key]: newTitle
     }));
     try {
       await updateQuery({
-        ...query,
+        ...query_1,
         title: newTitle
-      }), setOptimisticTitles((prev_1) => {
+      }), setOptimisticTitles((prev_3) => {
         const next_0 = {
-          ...prev_1
+          ...prev_3
         };
-        return delete next_0[query._key], next_0;
+        return delete next_0[query_1._key], next_0;
       });
-    } catch (t52) {
-      const err = t52;
-      setOptimisticTitles((prev_0) => {
+    } catch (t102) {
+      const err_2 = t102;
+      setOptimisticTitles((prev_2) => {
         const next = {
-          ...prev_0
+          ...prev_2
         };
-        return delete next[query._key], next;
+        return delete next[query_1._key], next;
       }), toast.push({
         closable: !0,
         status: "error",
         title: t("save-query.error"),
-        description: err.message
+        description: err_2.message
       });
     }
-  }, $[13] = t, $[14] = toast, $[15] = updateQuery, $[16] = t4) : t4 = $[16];
-  const handleTitleSave = t4;
-  let t5;
-  $[17] !== currentParams || $[18] !== currentQuery || $[19] !== formatDate || $[20] !== generateUrl || $[21] !== getStateFromUrl || $[22] !== queries || $[23] !== t || $[24] !== toast || $[25] !== updateQuery ? (t5 = async (query_0) => {
+  }, $[28] = t, $[29] = toast, $[30] = updateQuery, $[31] = t9) : t9 = $[31];
+  const handleTitleSave = t9;
+  let t10;
+  $[32] !== currentParams || $[33] !== currentQuery || $[34] !== formatDate || $[35] !== generateUrl || $[36] !== getStateFromUrl || $[37] !== queries || $[38] !== t || $[39] !== toast || $[40] !== updateQuery ? (t10 = async (query_2) => {
     const newUrl_0 = generateUrl(currentQuery, currentParams);
     if (queries?.some((q_1) => {
-      if (q_1._key === query_0._key)
+      if (q_1._key === query_2._key)
         return !1;
       const savedQueryObj_1 = getStateFromUrl(q_1.url);
       return savedQueryObj_1 && savedQueryObj_1.query === currentQuery && isEqual(savedQueryObj_1.params, currentParams);
     })) {
       const duplicateQuery_0 = queries?.find((q_2) => {
-        if (q_2._key === query_0._key)
+        if (q_2._key === query_2._key)
           return !1;
         const savedQueryObj_2 = getStateFromUrl(q_2.url);
         return savedQueryObj_2 && savedQueryObj_2.query === currentQuery && isEqual(savedQueryObj_2.params, currentParams);
@@ -651,7 +852,7 @@ function QueryRecall(t0) {
     }
     try {
       await updateQuery({
-        ...query_0,
+        ...query_2,
         url: newUrl_0,
         savedAt: (/* @__PURE__ */ new Date()).toISOString()
       }), setSelectedUrl(newUrl_0), toast.push({
@@ -659,69 +860,111 @@ function QueryRecall(t0) {
         status: "success",
         title: t("save-query.success")
       });
-    } catch (t62) {
-      const err_0 = t62;
+    } catch (t112) {
+      const err_3 = t112;
       toast.push({
         closable: !0,
         status: "error",
         title: t("save-query.error"),
-        description: err_0.message
+        description: err_3.message
       });
     }
-  }, $[17] = currentParams, $[18] = currentQuery, $[19] = formatDate, $[20] = generateUrl, $[21] = getStateFromUrl, $[22] = queries, $[23] = t, $[24] = toast, $[25] = updateQuery, $[26] = t5) : t5 = $[26];
-  const handleUpdate = t5;
-  let T0, T1, t6, t7, t8;
-  if ($[27] !== currentParams || $[28] !== currentQuery || $[29] !== deleteQuery || $[30] !== editingKey || $[31] !== editingTitle || $[32] !== formatDate || $[33] !== getStateFromUrl || $[34] !== handleSave || $[35] !== handleTitleSave || $[36] !== handleUpdate || $[37] !== optimisticTitles || $[38] !== queries || $[39] !== saving || $[40] !== searchQuery || $[41] !== selectedUrl || $[42] !== setStateFromParsedUrl || $[43] !== t) {
-    const filteredQueries = queries?.filter((q_3) => q_3?.title?.toLowerCase().includes(searchQuery.toLowerCase()));
+  }, $[32] = currentParams, $[33] = currentQuery, $[34] = formatDate, $[35] = generateUrl, $[36] = getStateFromUrl, $[37] = queries, $[38] = t, $[39] = toast, $[40] = updateQuery, $[41] = t10) : t10 = $[41];
+  const handleUpdate = t10;
+  let T0, T1, t11, t12, t13, t14;
+  if ($[42] !== compactMode || $[43] !== currentParams || $[44] !== currentQuery || $[45] !== deleteQuery || $[46] !== editingKey || $[47] !== editingTitle || $[48] !== formatDate || $[49] !== getStateFromUrl || $[50] !== handleSave || $[51] !== handleTitleSave || $[52] !== handleUnshareQuery || $[53] !== handleUpdate || $[54] !== optimisticTitles || $[55] !== pendingUnshareKeys || $[56] !== queries || $[57] !== queryFilter || $[58] !== saving || $[59] !== searchQuery || $[60] !== selectedUrl || $[61] !== setStateFromParsedUrl || $[62] !== t) {
+    const filteredQueries = queries?.filter((q_3) => !pendingUnshareKeys.includes(q_3._key))?.filter((q_4) => {
+      const matchesSearch = (q_4.title ?? "").toLowerCase().includes(searchQuery.toLowerCase()), matchesFilter = queryFilter === "all" || queryFilter === "personal" && !q_4.shared || queryFilter === "shared" && q_4.shared;
+      return matchesSearch && matchesFilter;
+    });
     T1 = ScrollContainer;
-    let t92;
-    $[49] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t92 = {
-      textTransform: "capitalize"
-    }, $[49] = t92) : t92 = $[49];
-    let t102;
-    $[50] !== t ? (t102 = t("label.saved-queries"), $[50] = t, $[51] = t102) : t102 = $[51];
-    let t11;
-    $[52] !== t102 ? (t11 = /* @__PURE__ */ jsx(Text, { weight: "semibold", style: t92, size: 4, children: t102 }), $[52] = t102, $[53] = t11) : t11 = $[53];
-    let t12;
-    $[54] !== t ? (t12 = t("action.save-query"), $[54] = t, $[55] = t12) : t12 = $[55];
-    let t13;
-    $[56] !== handleSave || $[57] !== saving || $[58] !== t12 ? (t13 = /* @__PURE__ */ jsx(Button, { label: t12, icon: AddIcon, disabled: saving, onClick: handleSave, mode: "bleed" }), $[56] = handleSave, $[57] = saving, $[58] = t12, $[59] = t13) : t13 = $[59];
-    let t14;
-    $[60] !== t11 || $[61] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Flex, { padding: 3, paddingTop: 4, paddingBottom: 0, justify: "space-between", align: "center", children: [
-      t11,
-      t13
-    ] }), $[60] = t11, $[61] = t13, $[62] = t14) : t14 = $[62];
-    let t15;
-    $[63] !== t ? (t15 = t("label.search-queries"), $[63] = t, $[64] = t15) : t15 = $[64];
-    let t16;
-    $[65] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t16 = (event) => setSearchQuery(event.currentTarget.value), $[65] = t16) : t16 = $[65];
-    let t17;
-    $[66] !== searchQuery || $[67] !== t15 ? (t17 = /* @__PURE__ */ jsx(Box, { padding: 3, paddingTop: 0, children: /* @__PURE__ */ jsx(TextInput, { placeholder: t15, icon: SearchIcon, value: searchQuery, onChange: t16 }) }), $[66] = searchQuery, $[67] = t15, $[68] = t17) : t17 = $[68], $[69] !== t14 || $[70] !== t17 ? (t8 = /* @__PURE__ */ jsxs(FixedHeader, { space: 3, children: [
-      t14,
-      t17
-    ] }), $[69] = t14, $[70] = t17, $[71] = t8) : t8 = $[71], T0 = Stack, t6 = 3, t7 = filteredQueries?.map((q_4) => {
-      const queryObj = getStateFromUrl(q_4.url), isSelected = selectedUrl === q_4.url, areQueriesEqual = queryObj && currentQuery === queryObj.query && isEqual(currentParams, queryObj.params), isEdited = isSelected && !areQueriesEqual;
-      return /* @__PURE__ */ jsx(Card, { width: "fill", padding: 4, border: !0, tone: isSelected ? "positive" : "default", onClick: () => {
-        setSelectedUrl(q_4.url);
-        const parsedUrl = getStateFromUrl(q_4.url);
+    let t152;
+    $[69] !== t ? (t152 = t("label.saved-queries"), $[69] = t, $[70] = t152) : t152 = $[70];
+    let t162;
+    $[71] !== t152 ? (t162 = /* @__PURE__ */ jsx(StyledLabel, { muted: !0, children: t152 }), $[71] = t152, $[72] = t162) : t162 = $[72];
+    let t172;
+    $[73] !== t ? (t172 = t("action.save-query"), $[73] = t, $[74] = t172) : t172 = $[74];
+    let t18;
+    $[75] !== handleSave ? (t18 = () => {
+      handleSave();
+    }, $[75] = handleSave, $[76] = t18) : t18 = $[76];
+    let t19;
+    $[77] !== saving || $[78] !== t172 || $[79] !== t18 ? (t19 = /* @__PURE__ */ jsx(Button, { label: t172, icon: AddIcon, disabled: saving, onClick: t18, mode: "bleed" }), $[77] = saving, $[78] = t172, $[79] = t18, $[80] = t19) : t19 = $[80];
+    let t20;
+    $[81] !== t162 || $[82] !== t19 ? (t20 = /* @__PURE__ */ jsxs(Flex, { padding: 3, paddingTop: 2, paddingBottom: 0, justify: "space-between", align: "center", children: [
+      t162,
+      t19
+    ] }), $[81] = t162, $[82] = t19, $[83] = t20) : t20 = $[83];
+    let t21;
+    $[84] !== t ? (t21 = t("label.search-queries"), $[84] = t, $[85] = t21) : t21 = $[85];
+    let t22;
+    $[86] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t22 = (event) => setSearchQuery(event.currentTarget.value), $[86] = t22) : t22 = $[86];
+    let t23;
+    $[87] !== searchQuery || $[88] !== t21 ? (t23 = /* @__PURE__ */ jsx(Box, { padding: 3, paddingTop: 0, children: /* @__PURE__ */ jsx(TextInput, { placeholder: t21, icon: SearchIcon, value: searchQuery, onChange: t22 }) }), $[87] = searchQuery, $[88] = t21, $[89] = t23) : t23 = $[89];
+    let t24;
+    $[90] !== t ? (t24 = t("label.all"), $[90] = t, $[91] = t24) : t24 = $[91];
+    const t25 = queryFilter === "all";
+    let t26;
+    $[92] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t26 = () => setQueryFilter("all"), $[92] = t26) : t26 = $[92];
+    let t27;
+    $[93] !== t24 || $[94] !== t25 ? (t27 = /* @__PURE__ */ jsx(Tab, { id: "query-filter-all", "aria-controls": "vision-query-recall-list", label: t24, selected: t25, onClick: t26 }), $[93] = t24, $[94] = t25, $[95] = t27) : t27 = $[95];
+    let t28;
+    $[96] !== t ? (t28 = t("label.personal"), $[96] = t, $[97] = t28) : t28 = $[97];
+    const t29 = queryFilter === "personal";
+    let t30;
+    $[98] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t30 = () => setQueryFilter("personal"), $[98] = t30) : t30 = $[98];
+    let t31;
+    $[99] !== t28 || $[100] !== t29 ? (t31 = /* @__PURE__ */ jsx(Tab, { id: "query-filter-personal", "aria-controls": "vision-query-recall-list", label: t28, selected: t29, onClick: t30 }), $[99] = t28, $[100] = t29, $[101] = t31) : t31 = $[101];
+    let t32;
+    $[102] !== t ? (t32 = t("label.shared"), $[102] = t, $[103] = t32) : t32 = $[103];
+    const t33 = queryFilter === "shared";
+    let t34;
+    $[104] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t34 = () => setQueryFilter("shared"), $[104] = t34) : t34 = $[104];
+    let t35;
+    $[105] !== t32 || $[106] !== t33 ? (t35 = /* @__PURE__ */ jsx(Tab, { id: "query-filter-shared", "aria-controls": "vision-query-recall-list", label: t32, selected: t33, onClick: t34 }), $[105] = t32, $[106] = t33, $[107] = t35) : t35 = $[107];
+    let t36;
+    $[108] !== t27 || $[109] !== t31 || $[110] !== t35 ? (t36 = /* @__PURE__ */ jsx(Box, { paddingX: 3, paddingBottom: 2, children: /* @__PURE__ */ jsxs(TabList, { space: 1, children: [
+      t27,
+      t31,
+      t35
+    ] }) }), $[108] = t27, $[109] = t31, $[110] = t35, $[111] = t36) : t36 = $[111], $[112] !== t20 || $[113] !== t23 || $[114] !== t36 ? (t14 = /* @__PURE__ */ jsxs(FixedHeader, { space: 3, children: [
+      t20,
+      t23,
+      t36
+    ] }), $[112] = t20, $[113] = t23, $[114] = t36, $[115] = t14) : t14 = $[115], T0 = Stack, t11 = "vision-query-recall-list", t12 = 3, t13 = filteredQueries?.map((q_5, index) => {
+      const queryObj = getStateFromUrl(q_5.url), fullQueryPreview = queryObj?.query || "", shortQueryPreview = fullQueryPreview.split("{")[0], isSelected = selectedUrl === q_5.url, canMutateQuery = !q_5.shared || q_5.isOwnedByCurrentUser, areQueriesEqual = queryObj && currentQuery === queryObj.query && isEqual(currentParams, queryObj.params), isEdited = isSelected && !areQueriesEqual && canMutateQuery;
+      return /* @__PURE__ */ jsx(Card, { width: "fill", paddingX: compactMode ? 3 : 4, paddingY: compactMode ? 3 : 4, tone: "default", onClick: (event_0) => {
+        if (event_0.target?.closest('[data-query-actions="true"]'))
+          return;
+        setSelectedUrl(q_5.url);
+        const parsedUrl = getStateFromUrl(q_5.url);
         parsedUrl && setStateFromParsedUrl(parsedUrl);
       }, style: {
-        position: "relative"
-      }, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-        /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
-          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, paddingRight: 1, children: [
-            editingKey === q_4._key ? /* @__PURE__ */ jsx(TextInput, { value: editingTitle, onChange: (event_0) => setEditingTitle(event_0.currentTarget.value), onKeyDown: (event_1) => {
-              event_1.key === "Enter" ? handleTitleSave(q_4, editingTitle) : event_1.key === "Escape" && setEditingKey(null);
-            }, onBlur: () => handleTitleSave(q_4, editingTitle), autoFocus: !0, style: {
+        borderTop: index === 0 ? "1px solid var(--card-border-color)" : void 0,
+        position: "relative",
+        borderBottom: "1px solid var(--card-border-color)",
+        borderLeft: isSelected ? "2px solid var(--card-muted-fg-color)" : "2px solid transparent",
+        cursor: "pointer"
+      }, children: /* @__PURE__ */ jsxs(Stack, { space: compactMode ? 2 : 3, children: [
+        /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", style: {
+          minHeight: "25px"
+        }, children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, paddingRight: 1, style: {
+            minWidth: 0,
+            flex: 1
+          }, children: [
+            editingKey === q_5._key ? /* @__PURE__ */ jsx(TextInput, { value: editingTitle, onChange: (event_1) => setEditingTitle(event_1.currentTarget.value), onKeyDown: (event_2) => {
+              event_2.key === "Enter" ? handleTitleSave(q_5, editingTitle) : event_2.key === "Escape" && setEditingKey(null);
+            }, onBlur: () => handleTitleSave(q_5, editingTitle), autoFocus: !0, style: {
               maxWidth: "170px",
               height: "24px"
-            } }) : /* @__PURE__ */ jsx(Text, { weight: "bold", size: 3, textOverflow: "ellipsis", style: {
-              maxWidth: "170px",
-              cursor: "pointer",
-              padding: "4px 0"
-            }, title: optimisticTitles[q_4._key] || q_4.title || q_4._key.slice(q_4._key.length - 5, q_4._key.length), onClick: () => {
-              setEditingKey(q_4._key), setEditingTitle(q_4.title || q_4._key.slice(0, 5));
-            }, children: optimisticTitles[q_4._key] || q_4.title || q_4._key.slice(q_4._key.length - 5, q_4._key.length) }),
+            } }) : /* @__PURE__ */ jsx(Text, { weight: "bold", size: compactMode ? 2 : 3, textOverflow: "ellipsis", style: {
+              maxWidth: compactMode ? "180px" : "220px",
+              cursor: canMutateQuery ? "pointer" : "default",
+              padding: "2px 0"
+            }, title: optimisticTitles[q_5._key] || q_5.title || q_5._key.slice(q_5._key.length - 5, q_5._key.length), onClick: canMutateQuery ? () => {
+              setEditingKey(q_5._key), setEditingTitle(q_5.title || q_5._key.slice(0, 5));
+            } : void 0, children: optimisticTitles[q_5._key] || q_5.title || q_5._key.slice(q_5._key.length - 5, q_5._key.length) }),
             isEdited && /* @__PURE__ */ jsx(Box, { style: {
               width: "6px",
               height: "6px",
@@ -729,16 +972,84 @@ function QueryRecall(t0) {
               backgroundColor: "var(--card-focus-ring-color)"
             } })
           ] }),
-          /* @__PURE__ */ jsx(MenuButton, { button: /* @__PURE__ */ jsx(ContextMenuButton, {}), id: `${q_4._key}-menu`, menu: /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(MenuItem, { tone: "critical", padding: 3, icon: TrashIcon, text: t("action.delete"), onClick: (event_2) => {
-            event_2.stopPropagation(), deleteQuery(q_4._key);
-          } }) }), popover: {
+          /* @__PURE__ */ jsx(Flex, { align: "center", gap: 2, children: /* @__PURE__ */ jsx(Box, { "data-query-actions": "true", style: {
+            width: "25px",
+            height: "25px",
+            display: "flex",
+            alignItems: "center"
+          }, children: (!q_5.shared || canMutateQuery) && /* @__PURE__ */ jsx(MenuButton, { button: /* @__PURE__ */ jsx(ContextMenuButton, {}), id: `${q_5._key}-menu`, menu: /* @__PURE__ */ jsxs(Menu, { children: [
+            !q_5.shared && /* @__PURE__ */ jsx(MenuItem, { icon: UsersIcon, padding: 3, text: t("label.share"), onClick: (event_3) => {
+              event_3.stopPropagation(), handleShareQuery(q_5);
+            } }),
+            q_5.shared && canMutateQuery && /* @__PURE__ */ jsx(MenuItem, { icon: UnpublishIcon, padding: 3, text: t("action.unshare"), onClick: (event_4) => {
+              event_4.stopPropagation(), handleUnshareQuery(q_5);
+            } }),
+            canMutateQuery && /* @__PURE__ */ jsx(MenuItem, { tone: "critical", padding: 3, icon: TrashIcon, text: t("action.delete"), onClick: (event_5) => {
+              event_5.stopPropagation(), deleteQuery(q_5._key);
+            } })
+          ] }), popover: {
             portal: !0,
             placement: "bottom-end",
             tone: "default"
-          } })
+          } }) }) })
+        ] }),
+        fullQueryPreview ? /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(Box, { padding: 2, style: {
+          maxWidth: "420px",
+          maxHeight: "220px",
+          overflow: "auto"
+        }, children: /* @__PURE__ */ jsx(Code, { size: 1, children: fullQueryPreview }) }), placement: "top", portal: !0, children: /* @__PURE__ */ jsx(Code, { muted: !0, size: 1, children: shortQueryPreview }) }) : /* @__PURE__ */ jsx(Code, { muted: !0 }),
+        compactMode ? /* @__PURE__ */ jsxs(Stack, { space: 1, style: {
+          paddingTop: 0,
+          minHeight: "30px"
+        }, children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, style: {
+            minHeight: "18px"
+          }, children: [
+            /* @__PURE__ */ jsx(Box, { style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "17px",
+              height: "17px"
+            }, children: q_5.shared ? /* @__PURE__ */ jsx(UserAvatar, { size: 0, user: q_5.authorId || "", withTooltip: !0 }) : /* @__PURE__ */ jsx(Box, { style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              lineHeight: 0,
+              color: "var(--card-muted-fg-color)"
+            }, children: /* @__PURE__ */ jsx(LockIcon, {}) }) }),
+            /* @__PURE__ */ jsx(Badge, { mode: "outline", tone: q_5.shared ? "primary" : "default", style: {
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }, children: q_5.shared ? t("label.shared") : t("label.personal") })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: formatDate.format(new Date(q_5.savedAt || "")) })
+        ] }) : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, style: {
+          paddingTop: "2px",
+          minHeight: "20px"
+        }, children: [
+          /* @__PURE__ */ jsx(Box, { style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "17px",
+            height: "17px"
+          }, children: q_5.shared ? /* @__PURE__ */ jsx(UserAvatar, { size: 0, user: q_5.authorId || "", withTooltip: !0 }) : /* @__PURE__ */ jsx(Box, { style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            lineHeight: 0,
+            color: "var(--card-muted-fg-color)"
+          }, children: /* @__PURE__ */ jsx(LockIcon, {}) }) }),
+          /* @__PURE__ */ jsx(Badge, { mode: "outline", tone: q_5.shared ? "primary" : "default", style: {
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }, children: q_5.shared ? t("label.shared") : t("label.personal") }),
+          /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "\u2022" }),
+          /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: formatDate.format(new Date(q_5.savedAt || "")) })
         ] }),
-        /* @__PURE__ */ jsx(Code, { muted: !0, children: queryObj?.query.split("{")[0] }),
-        /* @__PURE__ */ jsx(Flex, { align: "center", gap: 1, children: /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: formatDate.format(new Date(q_4.savedAt || "")) }) }),
         isEdited && /* @__PURE__ */ jsx(Button, { mode: "ghost", tone: "default", size: 1, padding: 2, style: {
           height: "24px",
           position: "absolute",
@@ -746,19 +1057,27 @@ function QueryRecall(t0) {
           bottom: "16px",
           fontSize: "12px"
         }, text: t("action.update"), onClick: (e) => {
-          e.stopPropagation(), handleUpdate(q_4);
+          e.stopPropagation(), handleUpdate(q_5);
         } })
-      ] }) }, q_4._key);
-    }), $[27] = currentParams, $[28] = currentQuery, $[29] = deleteQuery, $[30] = editingKey, $[31] = editingTitle, $[32] = formatDate, $[33] = getStateFromUrl, $[34] = handleSave, $[35] = handleTitleSave, $[36] = handleUpdate, $[37] = optimisticTitles, $[38] = queries, $[39] = saving, $[40] = searchQuery, $[41] = selectedUrl, $[42] = setStateFromParsedUrl, $[43] = t, $[44] = T0, $[45] = T1, $[46] = t6, $[47] = t7, $[48] = t8;
+      ] }) }, q_5._key);
+    }), $[42] = compactMode, $[43] = currentParams, $[44] = currentQuery, $[45] = deleteQuery, $[46] = editingKey, $[47] = editingTitle, $[48] = formatDate, $[49] = getStateFromUrl, $[50] = handleSave, $[51] = handleTitleSave, $[52] = handleUnshareQuery, $[53] = handleUpdate, $[54] = optimisticTitles, $[55] = pendingUnshareKeys, $[56] = queries, $[57] = queryFilter, $[58] = saving, $[59] = searchQuery, $[60] = selectedUrl, $[61] = setStateFromParsedUrl, $[62] = t, $[63] = T0, $[64] = T1, $[65] = t11, $[66] = t12, $[67] = t13, $[68] = t14;
   } else
-    T0 = $[44], T1 = $[45], t6 = $[46], t7 = $[47], t8 = $[48];
-  let t9;
-  $[72] !== T0 || $[73] !== t6 || $[74] !== t7 ? (t9 = /* @__PURE__ */ jsx(T0, { paddingY: t6, children: t7 }), $[72] = T0, $[73] = t6, $[74] = t7, $[75] = t9) : t9 = $[75];
-  let t10;
-  return $[76] !== T1 || $[77] !== t8 || $[78] !== t9 ? (t10 = /* @__PURE__ */ jsxs(T1, { children: [
-    t8,
-    t9
-  ] }), $[76] = T1, $[77] = t8, $[78] = t9, $[79] = t10) : t10 = $[79], t10;
+    T0 = $[63], T1 = $[64], t11 = $[65], t12 = $[66], t13 = $[67], t14 = $[68];
+  let t15;
+  $[116] !== T0 || $[117] !== t11 || $[118] !== t12 || $[119] !== t13 ? (t15 = /* @__PURE__ */ jsx(T0, { id: t11, paddingY: t12, children: t13 }), $[116] = T0, $[117] = t11, $[118] = t12, $[119] = t13, $[120] = t15) : t15 = $[120];
+  let t16;
+  $[121] !== handleConfirmShareQuery || $[122] !== shareDialogQuery || $[123] !== t ? (t16 = shareDialogQuery && /* @__PURE__ */ jsx(Dialog, { id: "vision-query-recall-share-dialog", width: 1, header: t("label.share"), onClose: () => setShareDialogQuery(null), footer: /* @__PURE__ */ jsxs(Flex, { width: "fill", justify: "flex-end", gap: 3, padding: 3, align: "center", children: [
+    /* @__PURE__ */ jsx(Button, { mode: "bleed", padding: 2, text: t("action.query-cancel"), onClick: () => setShareDialogQuery(null) }),
+    /* @__PURE__ */ jsx(Button, { padding: 2, tone: "primary", text: t("action.save-shared-query"), onClick: () => {
+      handleConfirmShareQuery();
+    } })
+  ] }), children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Text, { size: 2, children: t("save-query.share-warning") }) }) }), $[121] = handleConfirmShareQuery, $[122] = shareDialogQuery, $[123] = t, $[124] = t16) : t16 = $[124];
+  let t17;
+  return $[125] !== T1 || $[126] !== t14 || $[127] !== t15 || $[128] !== t16 ? (t17 = /* @__PURE__ */ jsxs(T1, { children: [
+    t14,
+    t15,
+    t16
+  ] }), $[125] = T1, $[126] = t14, $[127] = t15, $[128] = t16, $[129] = t17) : t17 = $[129], t17;
 }
 function narrowBreakpoint() {
   return typeof window < "u" && window.innerWidth > 600;
@@ -774,34 +1093,43 @@ function calculatePaneSizeOptions(height) {
   };
 }
 function usePaneSize(t0) {
-  const $ = c(6), {
+  const $ = c(7), {
     visionRootRef
-  } = t0, [isNarrowBreakpoint, setIsNarrowBreakpoint] = useState(_temp$4), [paneSizeOptions, setPaneSizeOptions] = useState(_temp2$3);
+  } = t0, [rootSize, setRootSize] = useState(_temp$4), [isNarrowBreakpoint, setIsNarrowBreakpoint] = useState(_temp2$3), [paneSizeOptions, setPaneSizeOptions] = useState(_temp3$2);
   let t1, t2;
   $[0] !== visionRootRef ? (t1 = () => {
     if (!visionRootRef.current)
       return;
     const handleResize = (entries) => {
-      setIsNarrowBreakpoint(narrowBreakpoint());
       const entry = entries?.[0];
-      entry && setPaneSizeOptions(calculatePaneSizeOptions(entry.contentRect.height));
+      entry && (setRootSize({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height
+      }), setIsNarrowBreakpoint(entry.contentRect.width > 600), setPaneSizeOptions(calculatePaneSizeOptions(entry.contentRect.height)));
     }, resizeObserver = new ResizeObserver(handleResize);
     return resizeObserver.observe(visionRootRef.current), () => {
       resizeObserver.disconnect();
     };
   }, t2 = [visionRootRef], $[0] = visionRootRef, $[1] = t1, $[2] = t2) : (t1 = $[1], t2 = $[2]), useEffect(t1, t2);
   let t3;
-  return $[3] !== isNarrowBreakpoint || $[4] !== paneSizeOptions ? (t3 = {
+  return $[3] !== isNarrowBreakpoint || $[4] !== paneSizeOptions || $[5] !== rootSize ? (t3 = {
     paneSizeOptions,
-    isNarrowBreakpoint
-  }, $[3] = isNarrowBreakpoint, $[4] = paneSizeOptions, $[5] = t3) : t3 = $[5], t3;
+    isNarrowBreakpoint,
+    rootSize
+  }, $[3] = isNarrowBreakpoint, $[4] = paneSizeOptions, $[5] = rootSize, $[6] = t3) : t3 = $[6], t3;
 }
-function _temp2$3() {
+function _temp3$2() {
   return calculatePaneSizeOptions(void 0);
 }
-function _temp$4() {
+function _temp2$3() {
   return narrowBreakpoint();
 }
+function _temp$4() {
+  return {
+    width: typeof window < "u" ? window.innerWidth : 1e3,
+    height: typeof window < "u" ? window.innerHeight : 800
+  };
+}
 function VisionGuiControls(t0) {
   const $ = c(30), {
     hasValidParams,
@@ -922,7 +1250,7 @@ const PinnedReleasePerspectiveOption = (t0) => {
   return $[8] !== t4 || $[9] !== text ? (t5 = /* @__PURE__ */ jsx("option", { value: "pinnedRelease", disabled: t4, children: text }), $[8] = t4, $[9] = text, $[10] = t5) : t5 = $[10], t5;
 };
 function VisionGuiHeader(t0) {
-  const $ = c(65), {
+  const $ = c(68), {
     onChangeDataset,
     dataset,
     customApiVersion,
@@ -953,71 +1281,77 @@ function VisionGuiHeader(t0) {
   let t2;
   $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = [1, 4, 8, 12], $[1] = t2) : t2 = $[1];
   let t3;
-  $[2] !== t ? (t3 = t("settings.dataset-label"), $[2] = t, $[3] = t3) : t3 = $[3];
+  $[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t3 = [1, 2], $[2] = t3) : t3 = $[2];
   let t4;
-  $[4] !== t3 ? (t4 = /* @__PURE__ */ jsx(Card, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsx(StyledLabel, { children: t3 }) }), $[4] = t3, $[5] = t4) : t4 = $[5];
+  $[3] !== t ? (t4 = t("settings.dataset-label"), $[3] = t, $[4] = t4) : t4 = $[4];
   let t5;
-  $[6] !== datasets ? (t5 = datasets.map(_temp2$2), $[6] = datasets, $[7] = t5) : t5 = $[7];
+  $[5] !== t4 ? (t5 = /* @__PURE__ */ jsx(Card, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsx(StyledLabel, { children: t4 }) }), $[5] = t4, $[6] = t5) : t5 = $[6];
   let t6;
-  $[8] !== dataset || $[9] !== onChangeDataset || $[10] !== t5 ? (t6 = /* @__PURE__ */ jsx(Select, { value: dataset, onChange: onChangeDataset, children: t5 }), $[8] = dataset, $[9] = onChangeDataset, $[10] = t5, $[11] = t6) : t6 = $[11];
+  $[7] !== datasets ? (t6 = datasets.map(_temp2$2), $[7] = datasets, $[8] = t6) : t6 = $[8];
   let t7;
-  $[12] !== t4 || $[13] !== t6 ? (t7 = /* @__PURE__ */ jsx(Box, { padding: 1, column: 2, children: /* @__PURE__ */ jsxs(Stack, { children: [
-    t4,
-    t6
-  ] }) }), $[12] = t4, $[13] = t6, $[14] = t7) : t7 = $[14];
+  $[9] !== dataset || $[10] !== onChangeDataset || $[11] !== t6 ? (t7 = /* @__PURE__ */ jsx(Select, { value: dataset, onChange: onChangeDataset, children: t6 }), $[9] = dataset, $[10] = onChangeDataset, $[11] = t6, $[12] = t7) : t7 = $[12];
   let t8;
-  $[15] !== t ? (t8 = t("settings.api-version-label"), $[15] = t, $[16] = t8) : t8 = $[16];
+  $[13] !== t5 || $[14] !== t7 ? (t8 = /* @__PURE__ */ jsx(Box, { padding: 1, column: t3, children: /* @__PURE__ */ jsxs(Stack, { children: [
+    t5,
+    t7
+  ] }) }), $[13] = t5, $[14] = t7, $[15] = t8) : t8 = $[15];
   let t9;
-  $[17] !== t8 ? (t9 = /* @__PURE__ */ jsx(Card, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsx(StyledLabel, { children: t8 }) }), $[17] = t8, $[18] = t9) : t9 = $[18];
-  const t10 = customApiVersion === !1 ? apiVersion : "other";
+  $[16] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t9 = [1, 2], $[16] = t9) : t9 = $[16];
+  let t10;
+  $[17] !== t ? (t10 = t("settings.api-version-label"), $[17] = t, $[18] = t10) : t10 = $[18];
   let t11;
-  $[19] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t11 = API_VERSIONS.map(_temp3$1), $[19] = t11) : t11 = $[19];
-  let t12;
-  $[20] !== t ? (t12 = t("settings.other-api-version-label"), $[20] = t, $[21] = t12) : t12 = $[21];
+  $[19] !== t10 ? (t11 = /* @__PURE__ */ jsx(Card, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsx(StyledLabel, { children: t10 }) }), $[19] = t10, $[20] = t11) : t11 = $[20];
+  const t12 = customApiVersion === !1 ? apiVersion : "other";
   let t13;
-  $[22] !== t12 ? (t13 = /* @__PURE__ */ jsx("option", { value: "other", children: t12 }, "other"), $[22] = t12, $[23] = t13) : t13 = $[23];
+  $[21] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t13 = API_VERSIONS.map(_temp3$1), $[21] = t13) : t13 = $[21];
   let t14;
-  $[24] !== onChangeApiVersion || $[25] !== t10 || $[26] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Select, { "data-testid": "api-version-selector", value: t10, onChange: onChangeApiVersion, children: [
-    t11,
-    t13
-  ] }), $[24] = onChangeApiVersion, $[25] = t10, $[26] = t13, $[27] = t14) : t14 = $[27];
+  $[22] !== t ? (t14 = t("settings.other-api-version-label"), $[22] = t, $[23] = t14) : t14 = $[23];
   let t15;
-  $[28] !== t14 || $[29] !== t9 ? (t15 = /* @__PURE__ */ jsx(Box, { padding: 1, column: 2, children: /* @__PURE__ */ jsxs(Stack, { children: [
-    t9,
-    t14
-  ] }) }), $[28] = t14, $[29] = t9, $[30] = t15) : t15 = $[30];
+  $[24] !== t14 ? (t15 = /* @__PURE__ */ jsx("option", { value: "other", children: t14 }, "other"), $[24] = t14, $[25] = t15) : t15 = $[25];
   let t16;
-  $[31] !== customApiVersion || $[32] !== customApiVersionElementRef || $[33] !== isValidApiVersion || $[34] !== onCustomApiVersionChange || $[35] !== t ? (t16 = customApiVersion !== !1 && /* @__PURE__ */ jsx(Box, { padding: 1, column: 2, children: /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(Card, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsx(StyledLabel, { textOverflow: "ellipsis", children: t("settings.custom-api-version-label") }) }),
-    /* @__PURE__ */ jsx(TextInput, { ref: customApiVersionElementRef, value: customApiVersion, onChange: onCustomApiVersionChange, customValidity: isValidApiVersion ? void 0 : t("settings.error.invalid-api-version"), maxLength: 11 })
-  ] }) }), $[31] = customApiVersion, $[32] = customApiVersionElementRef, $[33] = isValidApiVersion, $[34] = onCustomApiVersionChange, $[35] = t, $[36] = t16) : t16 = $[36];
+  $[26] !== onChangeApiVersion || $[27] !== t12 || $[28] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Select, { "data-testid": "api-version-selector", value: t12, onChange: onChangeApiVersion, children: [
+    t13,
+    t15
+  ] }), $[26] = onChangeApiVersion, $[27] = t12, $[28] = t15, $[29] = t16) : t16 = $[29];
   let t17;
-  $[37] !== t ? (t17 = t("settings.perspective-label"), $[37] = t, $[38] = t17) : t17 = $[38];
+  $[30] !== t11 || $[31] !== t16 ? (t17 = /* @__PURE__ */ jsx(Box, { padding: 1, column: t9, children: /* @__PURE__ */ jsxs(Stack, { children: [
+    t11,
+    t16
+  ] }) }), $[30] = t11, $[31] = t16, $[32] = t17) : t17 = $[32];
   let t18;
-  $[39] !== t17 ? (t18 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(StyledLabel, { children: t17 }) }), $[39] = t17, $[40] = t18) : t18 = $[40];
+  $[33] !== customApiVersion || $[34] !== customApiVersionElementRef || $[35] !== isValidApiVersion || $[36] !== onCustomApiVersionChange || $[37] !== t ? (t18 = customApiVersion !== !1 && /* @__PURE__ */ jsx(Box, { padding: 1, column: [1, 2], children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(Card, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsx(StyledLabel, { textOverflow: "ellipsis", children: t("settings.custom-api-version-label") }) }),
+    /* @__PURE__ */ jsx(TextInput, { ref: customApiVersionElementRef, value: customApiVersion, onChange: onCustomApiVersionChange, customValidity: isValidApiVersion ? void 0 : t("settings.error.invalid-api-version"), maxLength: 11 })
+  ] }) }), $[33] = customApiVersion, $[34] = customApiVersionElementRef, $[35] = isValidApiVersion, $[36] = onCustomApiVersionChange, $[37] = t, $[38] = t18) : t18 = $[38];
   let t19;
-  $[41] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t19 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(PerspectivePopover, {}) }), $[41] = t19) : t19 = $[41];
+  $[39] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t19 = [1, 2], $[39] = t19) : t19 = $[39];
   let t20;
-  $[42] !== t18 ? (t20 = /* @__PURE__ */ jsx(Card, { paddingBottom: 1, children: /* @__PURE__ */ jsxs(Inline, { space: 1, children: [
-    t18,
-    t19
-  ] }) }), $[42] = t18, $[43] = t20) : t20 = $[43];
-  const t21 = perspective || "default";
+  $[40] !== t ? (t20 = t("settings.perspective-label"), $[40] = t, $[41] = t20) : t20 = $[41];
+  let t21;
+  $[42] !== t20 ? (t21 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(StyledLabel, { children: t20 }) }), $[42] = t20, $[43] = t21) : t21 = $[43];
   let t22;
-  $[44] !== isScheduledDraftsEnabled || $[45] !== pinnedPerspective || $[46] !== t ? (t22 = SUPPORTED_PERSPECTIVES.map((perspectiveName) => perspectiveName === "pinnedRelease" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  $[44] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(PerspectivePopover, {}) }), $[44] = t22) : t22 = $[44];
+  let t23;
+  $[45] !== t21 ? (t23 = /* @__PURE__ */ jsx(Card, { paddingBottom: 1, children: /* @__PURE__ */ jsxs(Inline, { space: 1, children: [
+    t21,
+    t22
+  ] }) }), $[45] = t21, $[46] = t23) : t23 = $[46];
+  const t24 = perspective || "default";
+  let t25;
+  $[47] !== isScheduledDraftsEnabled || $[48] !== pinnedPerspective || $[49] !== t ? (t25 = SUPPORTED_PERSPECTIVES.map((perspectiveName) => perspectiveName === "pinnedRelease" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(PinnedReleasePerspectiveOption, { pinnedPerspective, t }),
     /* @__PURE__ */ jsx("option", { value: "default", children: t("settings.perspectives.default") }, "default"),
     /* @__PURE__ */ jsx("hr", {})
-  ] }, "pinnedRelease") : perspectiveName === "scheduledDrafts" ? isScheduledDraftsEnabled ? /* @__PURE__ */ jsx("option", { value: "scheduledDrafts", children: t("settings.perspectives.scheduled-drafts") }, "scheduledDrafts") : null : /* @__PURE__ */ jsx("option", { children: perspectiveName }, perspectiveName)), $[44] = isScheduledDraftsEnabled, $[45] = pinnedPerspective, $[46] = t, $[47] = t22) : t22 = $[47];
-  let t23;
-  $[48] !== onChangePerspective || $[49] !== t21 || $[50] !== t22 ? (t23 = /* @__PURE__ */ jsx(Select, { value: t21, onChange: onChangePerspective, children: t22 }), $[48] = onChangePerspective, $[49] = t21, $[50] = t22, $[51] = t23) : t23 = $[51];
-  let t24;
-  $[52] !== t20 || $[53] !== t23 ? (t24 = /* @__PURE__ */ jsx(Box, { padding: 1, column: 2, children: /* @__PURE__ */ jsxs(Stack, { children: [
-    t20,
-    t23
-  ] }) }), $[52] = t20, $[53] = t23, $[54] = t24) : t24 = $[54];
-  let t25;
-  $[55] !== customApiVersion || $[56] !== t || $[57] !== url ? (t25 = typeof url == "string" ? /* @__PURE__ */ jsx(Box, { padding: 1, flex: 1, column: customApiVersion === !1 ? 6 : 4, children: /* @__PURE__ */ jsxs(Stack, { children: [
+  ] }, "pinnedRelease") : perspectiveName === "scheduledDrafts" ? isScheduledDraftsEnabled ? /* @__PURE__ */ jsx("option", { value: "scheduledDrafts", children: t("settings.perspectives.scheduled-drafts") }, "scheduledDrafts") : null : /* @__PURE__ */ jsx("option", { children: perspectiveName }, perspectiveName)), $[47] = isScheduledDraftsEnabled, $[48] = pinnedPerspective, $[49] = t, $[50] = t25) : t25 = $[50];
+  let t26;
+  $[51] !== onChangePerspective || $[52] !== t24 || $[53] !== t25 ? (t26 = /* @__PURE__ */ jsx(Select, { value: t24, onChange: onChangePerspective, children: t25 }), $[51] = onChangePerspective, $[52] = t24, $[53] = t25, $[54] = t26) : t26 = $[54];
+  let t27;
+  $[55] !== t23 || $[56] !== t26 ? (t27 = /* @__PURE__ */ jsx(Box, { padding: 1, column: t19, children: /* @__PURE__ */ jsxs(Stack, { children: [
+    t23,
+    t26
+  ] }) }), $[55] = t23, $[56] = t26, $[57] = t27) : t27 = $[57];
+  let t28;
+  $[58] !== customApiVersion || $[59] !== t || $[60] !== url ? (t28 = typeof url == "string" ? /* @__PURE__ */ jsx(Box, { padding: 1, flex: 1, column: [1, customApiVersion === !1 ? 6 : 4], children: /* @__PURE__ */ jsxs(Stack, { children: [
     /* @__PURE__ */ jsx(Card, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsxs(StyledLabel, { children: [
       t("query.url"),
       "\xA0",
@@ -1031,15 +1365,15 @@ function VisionGuiHeader(t0) {
       /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(TextInput, { readOnly: !0, type: "url", ref: operationUrlElement, value: url }) }),
       /* @__PURE__ */ jsx(Tooltip, { content: t("action.copy-url-to-clipboard"), children: /* @__PURE__ */ jsx(Button, { "aria-label": t("action.copy-url-to-clipboard"), type: "button", mode: "ghost", icon: CopyIcon, onClick: handleCopyUrl }) })
     ] })
-  ] }) }) : /* @__PURE__ */ jsx(Box, { flex: 1 }), $[55] = customApiVersion, $[56] = t, $[57] = url, $[58] = t25) : t25 = $[58];
-  let t26;
-  return $[59] !== t15 || $[60] !== t16 || $[61] !== t24 || $[62] !== t25 || $[63] !== t7 ? (t26 = /* @__PURE__ */ jsx(Header, { paddingX: 3, paddingY: 2, children: /* @__PURE__ */ jsxs(Grid, { columns: t2, children: [
-    t7,
-    t15,
-    t16,
-    t24,
-    t25
-  ] }) }), $[59] = t15, $[60] = t16, $[61] = t24, $[62] = t25, $[63] = t7, $[64] = t26) : t26 = $[64], t26;
+  ] }) }) : /* @__PURE__ */ jsx(Box, { flex: 1 }), $[58] = customApiVersion, $[59] = t, $[60] = url, $[61] = t28) : t28 = $[61];
+  let t29;
+  return $[62] !== t17 || $[63] !== t18 || $[64] !== t27 || $[65] !== t28 || $[66] !== t8 ? (t29 = /* @__PURE__ */ jsx(Header, { paddingX: 3, paddingY: 2, children: /* @__PURE__ */ jsxs(Grid, { columns: t2, children: [
+    t8,
+    t17,
+    t18,
+    t27,
+    t28
+  ] }) }), $[62] = t17, $[63] = t18, $[64] = t27, $[65] = t28, $[66] = t8, $[67] = t29) : t29 = $[67], t29;
 }
 function _temp3$1(version) {
   return /* @__PURE__ */ jsx("option", { children: version }, version);
@@ -1360,7 +1694,7 @@ function SaveJsonButton(t0) {
   return $[0] !== blobUrl ? (t1 = /* @__PURE__ */ jsx(Button, { as: "a", download: "query-result.json", href: blobUrl, icon: DocumentSheetIcon, mode: "ghost", text: "JSON", tone: "default" }), $[0] = blobUrl, $[1] = t1) : t1 = $[1], t1;
 }
 function VisionGuiResult(t0) {
-  const $ = c(67), {
+  const $ = c(84), {
     error,
     queryInProgress,
     queryResult,
@@ -1368,88 +1702,108 @@ function VisionGuiResult(t0) {
     listenMutations,
     dataset,
     queryTime,
-    e2eTime
-  } = t0, {
+    e2eTime,
+    compactFooter: t1
+  } = t0, compactFooter = t1 === void 0 ? !1 : t1, {
     t
   } = useTranslation(visionLocaleNamespace), hasResult = !error && !queryInProgress && typeof queryResult < "u";
-  let t1;
-  $[0] !== hasResult || $[1] !== queryResult ? (t1 = hasResult ? getJsonBlobUrl(queryResult) : "", $[0] = hasResult, $[1] = queryResult, $[2] = t1) : t1 = $[2];
-  const jsonUrl = t1;
   let t2;
-  $[3] !== hasResult || $[4] !== queryResult ? (t2 = hasResult ? getCsvBlobUrl(queryResult) : "", $[3] = hasResult, $[4] = queryResult, $[5] = t2) : t2 = $[5];
-  const csvUrl = t2, t3 = error ? "critical" : "default", t4 = !!error;
-  let t5;
-  $[6] !== t ? (t5 = t("result.label"), $[6] = t, $[7] = t5) : t5 = $[7];
+  $[0] !== hasResult || $[1] !== queryResult ? (t2 = hasResult ? getJsonBlobUrl(queryResult) : "", $[0] = hasResult, $[1] = queryResult, $[2] = t2) : t2 = $[2];
+  const jsonUrl = t2;
+  let t3;
+  $[3] !== hasResult || $[4] !== queryResult ? (t3 = hasResult ? getCsvBlobUrl(queryResult) : "", $[3] = hasResult, $[4] = queryResult, $[5] = t3) : t3 = $[5];
+  const csvUrl = t3, t4 = error ? "critical" : "default", t5 = !!error;
   let t6;
-  $[8] !== t5 ? (t6 = /* @__PURE__ */ jsx(InputBackgroundContainer, { children: /* @__PURE__ */ jsx(Box, { marginLeft: 3, children: /* @__PURE__ */ jsx(StyledLabel, { muted: !0, children: t5 }) }) }), $[8] = t5, $[9] = t6) : t6 = $[9];
+  $[6] !== t ? (t6 = t("result.label"), $[6] = t, $[7] = t6) : t6 = $[7];
   let t7;
-  $[10] !== listenInProgress || $[11] !== listenMutations || $[12] !== queryInProgress ? (t7 = (queryInProgress || listenInProgress && listenMutations.length === 0) && /* @__PURE__ */ jsx(Box, { marginTop: 3, children: /* @__PURE__ */ jsx(DelayedSpinner, {}) }), $[10] = listenInProgress, $[11] = listenMutations, $[12] = queryInProgress, $[13] = t7) : t7 = $[13];
+  $[8] !== t6 ? (t7 = /* @__PURE__ */ jsx(InputBackgroundContainer, { children: /* @__PURE__ */ jsx(Box, { marginLeft: 3, children: /* @__PURE__ */ jsx(StyledLabel, { muted: !0, children: t6 }) }) }), $[8] = t6, $[9] = t7) : t7 = $[9];
   let t8;
-  $[14] !== error ? (t8 = error && /* @__PURE__ */ jsx(QueryErrorDialog, { error }), $[14] = error, $[15] = t8) : t8 = $[15];
+  $[10] !== listenInProgress || $[11] !== listenMutations || $[12] !== queryInProgress ? (t8 = (queryInProgress || listenInProgress && listenMutations.length === 0) && /* @__PURE__ */ jsx(Box, { marginTop: 3, children: /* @__PURE__ */ jsx(DelayedSpinner, {}) }), $[10] = listenInProgress, $[11] = listenMutations, $[12] = queryInProgress, $[13] = t8) : t8 = $[13];
   let t9;
-  $[16] !== dataset || $[17] !== hasResult || $[18] !== queryResult ? (t9 = hasResult && /* @__PURE__ */ jsx(ResultView, { data: queryResult, datasetName: dataset }), $[16] = dataset, $[17] = hasResult, $[18] = queryResult, $[19] = t9) : t9 = $[19];
+  $[14] !== error ? (t9 = error && /* @__PURE__ */ jsx(QueryErrorDialog, { error }), $[14] = error, $[15] = t9) : t9 = $[15];
   let t10;
-  $[20] !== dataset || $[21] !== listenInProgress || $[22] !== listenMutations ? (t10 = listenInProgress && listenMutations.length > 0 && /* @__PURE__ */ jsx(ResultView, { data: listenMutations, datasetName: dataset }), $[20] = dataset, $[21] = listenInProgress, $[22] = listenMutations, $[23] = t10) : t10 = $[23];
+  $[16] !== dataset || $[17] !== hasResult || $[18] !== queryResult ? (t10 = hasResult && /* @__PURE__ */ jsx(ResultView, { data: queryResult, datasetName: dataset }), $[16] = dataset, $[17] = hasResult, $[18] = queryResult, $[19] = t10) : t10 = $[19];
   let t11;
-  $[24] !== t10 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9 ? (t11 = /* @__PURE__ */ jsxs(Box, { padding: 3, paddingTop: 5, children: [
-    t7,
+  $[20] !== dataset || $[21] !== listenInProgress || $[22] !== listenMutations ? (t11 = listenInProgress && listenMutations.length > 0 && /* @__PURE__ */ jsx(ResultView, { data: listenMutations, datasetName: dataset }), $[20] = dataset, $[21] = listenInProgress, $[22] = listenMutations, $[23] = t11) : t11 = $[23];
+  let t12;
+  $[24] !== t10 || $[25] !== t11 || $[26] !== t8 || $[27] !== t9 ? (t12 = /* @__PURE__ */ jsxs(Box, { padding: 3, paddingTop: 5, children: [
     t8,
     t9,
-    t10
-  ] }), $[24] = t10, $[25] = t7, $[26] = t8, $[27] = t9, $[28] = t11) : t11 = $[28];
-  let t12;
-  $[29] !== t11 || $[30] !== t6 ? (t12 = /* @__PURE__ */ jsxs(Result, { overflow: "auto", children: [
-    t6,
+    t10,
     t11
-  ] }), $[29] = t11, $[30] = t6, $[31] = t12) : t12 = $[31];
+  ] }), $[24] = t10, $[25] = t11, $[26] = t8, $[27] = t9, $[28] = t12) : t12 = $[28];
   let t13;
-  $[32] !== t12 || $[33] !== t3 || $[34] !== t4 ? (t13 = /* @__PURE__ */ jsx(ResultInnerContainer, { flex: 1, children: /* @__PURE__ */ jsx(ResultContainer, { flex: 1, overflow: "hidden", tone: t3, $isInvalid: t4, children: t12 }) }), $[32] = t12, $[33] = t3, $[34] = t4, $[35] = t13) : t13 = $[35];
+  $[29] !== t12 || $[30] !== t7 ? (t13 = /* @__PURE__ */ jsxs(Result, { overflow: "auto", children: [
+    t7,
+    t12
+  ] }), $[29] = t12, $[30] = t7, $[31] = t13) : t13 = $[31];
   let t14;
-  $[36] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t14 = ["column", "column", "row"], $[36] = t14) : t14 = $[36];
-  let t15;
-  $[37] !== t ? (t15 = t("result.execution-time-label"), $[37] = t, $[38] = t15) : t15 = $[38];
-  let t16;
-  $[39] !== queryTime || $[40] !== t ? (t16 = typeof queryTime == "number" ? `${queryTime}ms` : t("result.timing-not-applicable"), $[39] = queryTime, $[40] = t, $[41] = t16) : t16 = $[41];
+  $[32] !== t13 || $[33] !== t4 || $[34] !== t5 ? (t14 = /* @__PURE__ */ jsx(ResultInnerContainer, { flex: 1, children: /* @__PURE__ */ jsx(ResultContainer, { flex: 1, overflow: "hidden", tone: t4, $isInvalid: t5, children: t13 }) }), $[32] = t13, $[33] = t4, $[34] = t5, $[35] = t14) : t14 = $[35];
+  const t15 = compactFooter ? "flex-start" : "space-between", t16 = compactFooter ? "stretch" : void 0;
   let t17;
-  $[42] !== t15 || $[43] !== t16 ? (t17 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
-    t15,
+  $[36] !== compactFooter ? (t17 = compactFooter ? "column" : ["column", "column", "row"], $[36] = compactFooter, $[37] = t17) : t17 = $[37];
+  const t18 = compactFooter ? 3 : 4, t19 = compactFooter ? 2 : 3;
+  let t20;
+  $[38] !== compactFooter ? (t20 = compactFooter ? {
+    width: "100%"
+  } : {
+    minWidth: 0
+  }, $[38] = compactFooter, $[39] = t20) : t20 = $[39];
+  const t21 = compactFooter ? 1 : 2;
+  let t22;
+  $[40] !== t ? (t22 = t("result.execution-time-label"), $[40] = t, $[41] = t22) : t22 = $[41];
+  let t23;
+  $[42] !== queryTime || $[43] !== t ? (t23 = typeof queryTime == "number" ? `${queryTime}ms` : t("result.timing-not-applicable"), $[42] = queryTime, $[43] = t, $[44] = t23) : t23 = $[44];
+  let t24;
+  $[45] !== t21 || $[46] !== t22 || $[47] !== t23 ? (t24 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { muted: !0, size: t21, children: [
+    t22,
     ":",
     " ",
-    t16
-  ] }) }), $[42] = t15, $[43] = t16, $[44] = t17) : t17 = $[44];
-  let t18;
-  $[45] !== t ? (t18 = t("result.end-to-end-time-label"), $[45] = t, $[46] = t18) : t18 = $[46];
-  let t19;
-  $[47] !== e2eTime || $[48] !== t ? (t19 = typeof e2eTime == "number" ? `${e2eTime}ms` : t("result.timing-not-applicable"), $[47] = e2eTime, $[48] = t, $[49] = t19) : t19 = $[49];
-  let t20;
-  $[50] !== t18 || $[51] !== t19 ? (t20 = /* @__PURE__ */ jsx(Box, { marginLeft: 4, children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
-    t18,
+    t23
+  ] }) }), $[45] = t21, $[46] = t22, $[47] = t23, $[48] = t24) : t24 = $[48];
+  const t25 = compactFooter ? 3 : 4, t26 = compactFooter ? 1 : 2;
+  let t27;
+  $[49] !== t ? (t27 = t("result.end-to-end-time-label"), $[49] = t, $[50] = t27) : t27 = $[50];
+  let t28;
+  $[51] !== e2eTime || $[52] !== t ? (t28 = typeof e2eTime == "number" ? `${e2eTime}ms` : t("result.timing-not-applicable"), $[51] = e2eTime, $[52] = t, $[53] = t28) : t28 = $[53];
+  let t29;
+  $[54] !== t26 || $[55] !== t27 || $[56] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Text, { muted: !0, size: t26, children: [
+    t27,
     ":",
     " ",
-    t19
-  ] }) }), $[50] = t18, $[51] = t19, $[52] = t20) : t20 = $[52];
-  let t21;
-  $[53] !== t17 || $[54] !== t20 ? (t21 = /* @__PURE__ */ jsx(TimingsCard, { paddingX: 4, paddingY: 3, sizing: "border", children: /* @__PURE__ */ jsxs(TimingsTextContainer, { align: "center", children: [
-    t17,
-    t20
-  ] }) }), $[53] = t17, $[54] = t20, $[55] = t21) : t21 = $[55];
-  let t22;
-  $[56] !== csvUrl || $[57] !== hasResult || $[58] !== jsonUrl || $[59] !== t ? (t22 = hasResult && /* @__PURE__ */ jsx(DownloadsCard, { paddingX: 4, paddingY: 3, sizing: "border", children: /* @__PURE__ */ jsx(SaveResultLabel, { muted: !0, children: /* @__PURE__ */ jsx(Translate, { components: {
+    t28
+  ] }), $[54] = t26, $[55] = t27, $[56] = t28, $[57] = t29) : t29 = $[57];
+  let t30;
+  $[58] !== t25 || $[59] !== t29 ? (t30 = /* @__PURE__ */ jsx(Box, { marginLeft: t25, children: t29 }), $[58] = t25, $[59] = t29, $[60] = t30) : t30 = $[60];
+  let t31;
+  $[61] !== t24 || $[62] !== t30 ? (t31 = /* @__PURE__ */ jsxs(TimingsTextContainer, { align: "center", children: [
+    t24,
+    t30
+  ] }), $[61] = t24, $[62] = t30, $[63] = t31) : t31 = $[63];
+  let t32;
+  $[64] !== t18 || $[65] !== t19 || $[66] !== t20 || $[67] !== t31 ? (t32 = /* @__PURE__ */ jsx(TimingsCard, { paddingX: t18, paddingY: t19, sizing: "border", style: t20, children: t31 }), $[64] = t18, $[65] = t19, $[66] = t20, $[67] = t31, $[68] = t32) : t32 = $[68];
+  let t33;
+  $[69] !== compactFooter || $[70] !== csvUrl || $[71] !== hasResult || $[72] !== jsonUrl || $[73] !== t ? (t33 = hasResult && /* @__PURE__ */ jsx(DownloadsCard, { paddingX: compactFooter ? 3 : 4, paddingY: compactFooter ? 2 : 3, sizing: "border", style: compactFooter ? {
+    width: "100%"
+  } : {
+    marginLeft: "auto",
+    minWidth: 0
+  }, children: /* @__PURE__ */ jsx(SaveResultLabel, { muted: !0, size: compactFooter ? 1 : 2, children: /* @__PURE__ */ jsx(Translate, { components: {
     SaveResultButtons: () => /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SaveJsonButton, { blobUrl: jsonUrl }),
       /* @__PURE__ */ jsx(SaveCsvButton, { blobUrl: csvUrl })
     ] })
-  }, i18nKey: "result.save-result-as-format", t }) }) }), $[56] = csvUrl, $[57] = hasResult, $[58] = jsonUrl, $[59] = t, $[60] = t22) : t22 = $[60];
-  let t23;
-  $[61] !== t21 || $[62] !== t22 ? (t23 = /* @__PURE__ */ jsxs(ResultFooter, { justify: "space-between", direction: t14, children: [
-    t21,
-    t22
-  ] }), $[61] = t21, $[62] = t22, $[63] = t23) : t23 = $[63];
-  let t24;
-  return $[64] !== t13 || $[65] !== t23 ? (t24 = /* @__PURE__ */ jsxs(ResultOuterContainer, { direction: "column", "data-testid": "vision-result", children: [
-    t13,
-    t23
-  ] }), $[64] = t13, $[65] = t23, $[66] = t24) : t24 = $[66], t24;
+  }, i18nKey: "result.save-result-as-format", t }) }) }), $[69] = compactFooter, $[70] = csvUrl, $[71] = hasResult, $[72] = jsonUrl, $[73] = t, $[74] = t33) : t33 = $[74];
+  let t34;
+  $[75] !== t15 || $[76] !== t16 || $[77] !== t17 || $[78] !== t32 || $[79] !== t33 ? (t34 = /* @__PURE__ */ jsxs(ResultFooter, { justify: t15, align: t16, direction: t17, children: [
+    t32,
+    t33
+  ] }), $[75] = t15, $[76] = t16, $[77] = t17, $[78] = t32, $[79] = t33, $[80] = t34) : t34 = $[80];
+  let t35;
+  return $[81] !== t14 || $[82] !== t34 ? (t35 = /* @__PURE__ */ jsxs(ResultOuterContainer, { direction: "column", "data-testid": "vision-result", children: [
+    t14,
+    t34
+  ] }), $[81] = t14, $[82] = t34, $[83] = t35) : t35 = $[83], t35;
 }
 function nodeContains(node, other) {
   return !node || !other ? !1 : node === other || !!(node.compareDocumentPosition(other) & 16);