@jytextiles/medusa-plugin-faire-store-sync 0.2.7 → 0.2.8

package/.medusa/server/src/admin/index.js

@@ -3,9 +3,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const adminSdk = require("@medusajs/admin-sdk");
 const ui = require("@medusajs/ui");
 const reactQuery = require("@tanstack/react-query");
+const react = require("react");
 const Medusa = require("@medusajs/js-sdk");
 const icons = require("@medusajs/icons");
-const react = require("react");
 const reactRouterDom = require("react-router-dom");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Medusa__default = /* @__PURE__ */ _interopDefault(Medusa);
@@ -74,6 +74,7 @@ const faireApi = {
     return sdk.client.fetch("/admin/faire/products", { query });
   }
 };
+const MAX_RENDERED = 60;
 const badgeColor = (status) => {
   switch (status) {
     case "synced":
@@ -89,7 +90,7 @@ const badgeColor = (status) => {
   }
 };
 const FaireProductWidget = ({ data }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const queryClient = reactQuery.useQueryClient();
   const productKey = ["faire", "product-status", data.id];
   const statusQuery = reactQuery.useQuery({
@@ -132,6 +133,45 @@ const FaireProductWidget = ({ data }) => {
     status: latest.status
   } : null;
   const notReady = connected && readiness && !readiness.ready_to_publish;
+  const metadata = data.metadata || {};
+  const productType = (_d = data.type) == null ? void 0 : _d.value;
+  const [pickerOpen, setPickerOpen] = react.useState(false);
+  const [pickerSearch, setPickerSearch] = react.useState("");
+  const [pinnedOverride, setPinnedOverride] = react.useState(
+    void 0
+  );
+  const taxonomyQuery = reactQuery.useQuery({
+    queryKey: ["faire", "taxonomy"],
+    enabled: pickerOpen,
+    queryFn: async () => (await faireApi.taxonomy()).taxonomy ?? []
+  });
+  const taxonomy = taxonomyQuery.data ?? [];
+  const pinnedId = pinnedOverride !== void 0 ? pinnedOverride ?? void 0 : metadata.faire_taxonomy_type_id;
+  const pinnedName = react.useMemo(() => {
+    var _a2;
+    if (!pinnedId) return void 0;
+    if (!/^tt_/.test(String(pinnedId))) return String(pinnedId);
+    return (_a2 = taxonomy.find((t) => t.id === pinnedId)) == null ? void 0 : _a2.name;
+  }, [pinnedId, taxonomy]);
+  const resolvedSource = pinnedId ? { label: pinnedName || String(pinnedId), from: "pinned" } : metadata.faire_category ? { label: String(metadata.faire_category), from: "metadata" } : productType ? { label: productType, from: "type" } : { label: "Account fallback", from: "fallback" };
+  const filteredTaxonomy = react.useMemo(() => {
+    const q = pickerSearch.trim().toLowerCase();
+    const list = q ? taxonomy.filter((t) => t.name.toLowerCase().includes(q)) : taxonomy;
+    return list.slice(0, MAX_RENDERED);
+  }, [taxonomy, pickerSearch]);
+  const saveCategory = reactQuery.useMutation({
+    mutationFn: (value) => sdk.admin.product.update(data.id, {
+      metadata: { ...metadata, faire_taxonomy_type_id: value }
+    }),
+    onSuccess: (_res, value) => {
+      setPinnedOverride(value);
+      queryClient.invalidateQueries({ queryKey: ["product", data.id] });
+      setPickerOpen(false);
+      setPickerSearch("");
+      ui.toast.success(value ? "Faire category set" : "Faire category cleared");
+    },
+    onError: (err) => ui.toast.error("Failed to save category", { description: err == null ? void 0 : err.message })
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
@@ -158,6 +198,25 @@ const FaireProductWidget = ({ data }) => {
           }
         )
       ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border px-3 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Faire category" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: resolvedSource.from === "fallback" ? "orange" : "grey", children: resolvedSource.from === "pinned" ? "Pinned" : resolvedSource.from === "type" ? "From Type" : resolvedSource.from === "metadata" ? "Metadata" : "Fallback" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: resolvedSource.label })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            size: "small",
+            variant: "secondary",
+            disabled: !connected,
+            onClick: () => setPickerOpen(true),
+            children: pinnedId ? "Change" : "Set category"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.Tooltip,
         {
@@ -174,7 +233,68 @@ const FaireProductWidget = ({ data }) => {
           )
         }
       ) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer, { open: pickerOpen, onOpenChange: setPickerOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Header, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Title, { children: "Pick a Faire category" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Description, { children: "Search Faire's product taxonomy and pin an exact category to this product." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Body, { className: "flex flex-col gap-3 overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            type: "search",
+            autoFocus: true,
+            placeholder: "Search categories…",
+            value: pickerSearch,
+            onChange: (e) => setPickerSearch(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 overflow-y-auto", children: [
+          taxonomyQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle px-1 py-2", children: "Loading categories…" }) : filteredTaxonomy.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle px-1 py-2", children: [
+            "No categories match “",
+            pickerSearch,
+            "”."
+          ] }) : filteredTaxonomy.map((t) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => saveCategory.mutate(t.id),
+              disabled: saveCategory.isPending,
+              className: ui.clx(
+                "flex items-center justify-between rounded-md px-3 py-2 text-left text-sm",
+                "hover:bg-ui-bg-base-hover",
+                t.id === pinnedId && "bg-ui-bg-highlight"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.name }),
+                t.id === pinnedId && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: "green", children: "Current" })
+              ]
+            },
+            t.id
+          )),
+          !taxonomyQuery.isLoading && taxonomy.length > filteredTaxonomy.length && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-muted px-1 py-1", children: [
+            "Showing ",
+            filteredTaxonomy.length,
+            " of ",
+            taxonomy.length,
+            " — refine your search to narrow down."
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Footer, { children: [
+        pinnedId && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            variant: "secondary",
+            onClick: () => saveCategory.mutate(null),
+            isLoading: saveCategory.isPending,
+            children: "Clear"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", children: "Cancel" }) })
+      ] })
+    ] }) })
   ] });
 };
 adminSdk.defineWidgetConfig({
@@ -342,7 +462,8 @@ const FaireSettingsPage = () => {
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-5 w-32" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 px-6 pb-6", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-10 w-full" }, i)) })
-      ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
@@ -470,6 +591,7 @@ const FaireSettingsPage = () => {
         )
       ] })
     ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {}),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Toaster, {})
   ] });
 };
@@ -692,10 +814,7 @@ const FaireBulkPage = () => {
     search: { state: search, onSearchChange: setSearch }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal, { prev: "/settings/faire", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Bulk sync products to Faire" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", size: "small", children: "Select products (or all matching) and push them to Faire as a background sync via the command bar." })
-    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Bulk sync" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.DataTable, { instance: table, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ui.DataTable.Toolbar, { className: "flex flex-col gap-y-3 border-b px-6 py-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2 md:flex-row md:items-center md:justify-between", children: [
@@ -735,6 +854,22 @@ const FaireBulkPage = () => {
                 },
                 children: selectAllMatching ? `All ${count} selected` : `Select all ${count}`
               }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                size: "small",
+                onClick: () => {
+                  if (!connected) {
+                    ui.toast.error("Faire is not connected");
+                    return;
+                  }
+                  pushMutation.mutate();
+                },
+                disabled: !connected || targetCount === 0,
+                isLoading: pushMutation.isPending,
+                children: "Push to Faire"
+              }
             )
           ] })
         ] }),
@@ -783,128 +918,14 @@ const FaireBulkPage = () => {
 const handle$2 = {
   breadcrumb: () => "Bulk sync"
 };
-const PARENT$1 = "/settings/faire";
-const STATUS_COLORS = {
-  success: "green",
-  failed: "red",
-  draft: "orange",
-  pending: "grey",
-  syncing: "grey"
-};
-const FaireSyncDetailPage = () => {
-  const { id } = reactRouterDom.useParams();
-  const navigate = reactRouterDom.useNavigate();
-  const [record, setRecord] = react.useState(null);
-  const [loading, setLoading] = react.useState(true);
-  const [retrying, setRetrying] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  react.useEffect(() => {
-    if (!id) return;
-    setLoading(true);
-    faireApi.getSync(id).then((res) => {
-      setRecord(res.sync || res);
-    }).catch((err) => setError(err.message || "Failed to load sync record")).finally(() => setLoading(false));
-  }, [id]);
-  const handleRetry = async () => {
-    if (!record) return;
-    setRetrying(true);
-    setError(null);
-    try {
-      await faireApi.retrySync(record.id);
-      const updated = await faireApi.getSync(record.id).catch(() => null);
-      if (updated) setRecord(updated.sync || updated);
-    } catch (err) {
-      setError(err.message || "Retry failed");
-    } finally {
-      setRetrying(false);
-    }
-  };
-  const warnings = (record == null ? void 0 : record.error_message) ? record.error_message.split(" | ") : [];
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal, { prev: PARENT$1, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: "Sync record" }),
-        record && /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: STATUS_COLORS[record.status] || "grey", children: record.status })
-      ] }),
-      record && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", variant: "transparent", disabled: retrying, children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisHorizontal, {}) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { align: "end", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.DropdownMenu.Item,
-            {
-              className: "gap-x-2",
-              onClick: handleRetry,
-              disabled: retrying,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowPath, { className: "text-ui-fg-subtle" }),
-                retrying ? "Re-syncing…" : "Re-sync product"
-              ]
-            }
-          ),
-          record.product_url && /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.DropdownMenu.Item,
-            {
-              className: "gap-x-2",
-              onClick: () => window.open(record.product_url, "_blank"),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpRightOnBox, { className: "text-ui-fg-subtle" }),
-                "Open on Faire"
-              ]
-            }
-          )
-        ] })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-col gap-4 overflow-y-auto p-6", children: [
-      error && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-tag-red-text", children: error }),
-      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-10 w-full" }, i)) }) : !record ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Sync record not found" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", onClick: () => navigate(PARENT$1), children: "Back to Faire settings" })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-ui-border-base grid grid-cols-2 gap-4 rounded-lg border p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "Record id", value: record.id, mono: true }),
-          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "Product", value: record.product_id, mono: true }),
-          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "Action", value: record.action }),
-          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "Faire product token", value: record.product_token || "—", mono: true }),
-          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "State", value: record.product_state || "—" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "Published", value: record.published ? "Yes" : "No" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Detail,
-            {
-              label: "Synced at",
-              value: record.synced_at ? new Date(record.synced_at).toLocaleString() : "—"
-            }
-          )
-        ] }),
-        warnings.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-ui-border-base flex flex-col gap-2 rounded-lg border p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Issues" }),
-          warnings.map((w, i) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-tag-red-text text-sm", children: w }, i))
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Toaster, {})
-  ] });
-};
-const Detail = ({
-  label,
-  value,
-  mono
-}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: label }),
-  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: mono ? "font-mono text-xs" : "", children: value })
-] });
-const handle$1 = {
-  breadcrumb: () => "Sync record"
-};
 const STATUS_KEY = ["faire", "status"];
 const TAXONOMY_KEY = ["faire", "taxonomy"];
-const PARENT = "/settings/faire";
+const PARENT$1 = "/settings/faire";
 const NONE = "__none__";
 const cleanSettings = (form) => {
   const out = { ...form };
   for (const key of [
     "default_brand_id",
-    "default_shipping_policy_id",
     "default_category"
   ]) {
     if (!out[key] || out[key] === NONE) out[key] = null;
@@ -924,7 +945,7 @@ const FaireSyncSettingsDrawer = () => {
   const [form, setForm] = react.useState({});
   const close = () => {
     setOpen(false);
-    navigate(PARENT);
+    navigate(PARENT$1);
   };
   const statusQuery = reactQuery.useQuery({
     queryKey: STATUS_KEY,
@@ -965,7 +986,6 @@ const FaireSyncSettingsDrawer = () => {
             /* @__PURE__ */ jsxRuntime.jsx(ChecklistItem, { ok: status == null ? void 0 : status.readiness.connected, label: "Faire connected" }),
             /* @__PURE__ */ jsxRuntime.jsx(ChecklistItem, { ok: status == null ? void 0 : status.readiness.brand, label: "Brand configured" }),
             /* @__PURE__ */ jsxRuntime.jsx(ChecklistItem, { ok: status == null ? void 0 : status.readiness.wholesale_pricing, label: "Wholesale pricing" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ChecklistItem, { ok: status == null ? void 0 : status.readiness.shipping_policy, label: "Shipping policy" }),
             /* @__PURE__ */ jsxRuntime.jsx(ChecklistItem, { ok: status == null ? void 0 : status.readiness.taxonomy, label: "Default category" })
           ] })
         ] }),
@@ -1022,7 +1042,7 @@ const FaireSyncSettingsDrawer = () => {
                 placeholder: "e.g. 14"
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Default category (taxonomy)", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Fallback category (taxonomy)", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: "Faire requires a category per product. Resolution order: product metadata → the product's Type (matched by name) → this fallback. Set the product Type or pick a category on the product page for accuracy.", children: /* @__PURE__ */ jsxRuntime.jsx(
               SelectField,
               {
                 value: String(form.default_category ?? ""),
@@ -1030,16 +1050,7 @@ const FaireSyncSettingsDrawer = () => {
                 disabled: !connected,
                 options: taxonomy.map((t) => ({ value: t.id, label: t.name }))
               }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Shipping policy ID", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Input,
-              {
-                value: String(form.default_shipping_policy_id ?? ""),
-                onChange: (e) => setForm({ ...form, default_shipping_policy_id: e.target.value || null }),
-                disabled: !connected,
-                placeholder: "sp_..."
-              }
-            ) }),
+            ) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Follow product status", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: "If on, published Medusa products are published on Faire; draft products sync as drafts.", children: /* @__PURE__ */ jsxRuntime.jsx(
               ui.Switch,
               {
@@ -1111,9 +1122,122 @@ const ChecklistItem = ({ ok, label }) => /* @__PURE__ */ jsxRuntime.jsxs(
     ]
   }
 );
-const handle = {
+const handle$1 = {
   breadcrumb: () => "Sync settings"
 };
+const PARENT = "/settings/faire";
+const STATUS_COLORS = {
+  success: "green",
+  failed: "red",
+  draft: "orange",
+  pending: "grey",
+  syncing: "grey"
+};
+const FaireSyncDetailPage = () => {
+  const { id } = reactRouterDom.useParams();
+  const navigate = reactRouterDom.useNavigate();
+  const [record, setRecord] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [retrying, setRetrying] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  react.useEffect(() => {
+    if (!id) return;
+    setLoading(true);
+    faireApi.getSync(id).then((res) => {
+      setRecord(res.sync || res);
+    }).catch((err) => setError(err.message || "Failed to load sync record")).finally(() => setLoading(false));
+  }, [id]);
+  const handleRetry = async () => {
+    if (!record) return;
+    setRetrying(true);
+    setError(null);
+    try {
+      await faireApi.retrySync(record.id);
+      const updated = await faireApi.getSync(record.id).catch(() => null);
+      if (updated) setRecord(updated.sync || updated);
+    } catch (err) {
+      setError(err.message || "Retry failed");
+    } finally {
+      setRetrying(false);
+    }
+  };
+  const warnings = (record == null ? void 0 : record.error_message) ? record.error_message.split(" | ") : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal, { prev: PARENT, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: "Sync record" }),
+        record && /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: STATUS_COLORS[record.status] || "grey", children: record.status })
+      ] }),
+      record && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", variant: "transparent", disabled: retrying, children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisHorizontal, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { align: "end", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.DropdownMenu.Item,
+            {
+              className: "gap-x-2",
+              onClick: handleRetry,
+              disabled: retrying,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowPath, { className: "text-ui-fg-subtle" }),
+                retrying ? "Re-syncing…" : "Re-sync product"
+              ]
+            }
+          ),
+          record.product_url && /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.DropdownMenu.Item,
+            {
+              className: "gap-x-2",
+              onClick: () => window.open(record.product_url, "_blank"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpRightOnBox, { className: "text-ui-fg-subtle" }),
+                "Open on Faire"
+              ]
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-col gap-4 overflow-y-auto p-6", children: [
+      error && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-tag-red-text", children: error }),
+      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-10 w-full" }, i)) }) : !record ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Sync record not found" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", onClick: () => navigate(PARENT), children: "Back to Faire settings" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-ui-border-base grid grid-cols-2 gap-4 rounded-lg border p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "Record id", value: record.id, mono: true }),
+          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "Product", value: record.product_id, mono: true }),
+          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "Action", value: record.action }),
+          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "Faire product token", value: record.product_token || "—", mono: true }),
+          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "State", value: record.product_state || "—" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Detail, { label: "Published", value: record.published ? "Yes" : "No" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Detail,
+            {
+              label: "Synced at",
+              value: record.synced_at ? new Date(record.synced_at).toLocaleString() : "—"
+            }
+          )
+        ] }),
+        warnings.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-ui-border-base flex flex-col gap-2 rounded-lg border p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Issues" }),
+          warnings.map((w, i) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-tag-red-text text-sm", children: w }, i))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Toaster, {})
+  ] });
+};
+const Detail = ({
+  label,
+  value,
+  mono
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: label }),
+  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: mono ? "font-mono text-xs" : "", children: value })
+] });
+const handle = {
+  breadcrumb: () => "Sync record"
+};
 const EXCHANGED_PREFIX = "faire:oauth:exchanged:";
 const FaireOauthCallback = () => {
   const [params] = reactRouterDom.useSearchParams();
@@ -1192,21 +1316,23 @@ const routeModule = {
     {
       Component: FaireSettingsPage,
       path: "/settings/faire",
-      handle: handle$3
-    },
-    {
-      Component: FaireBulkPage,
-      path: "/settings/faire/bulk",
-      handle: handle$2
+      handle: handle$3,
+      children: [
+        {
+          Component: FaireBulkPage,
+          path: "/settings/faire/bulk",
+          handle: handle$2
+        },
+        {
+          Component: FaireSyncSettingsDrawer,
+          path: "/settings/faire/settings",
+          handle: handle$1
+        }
+      ]
     },
     {
       Component: FaireSyncDetailPage,
       path: "/settings/faire/:id",
-      handle: handle$1
-    },
-    {
-      Component: FaireSyncSettingsDrawer,
-      path: "/settings/faire/settings",
       handle
     },
     {