@liiift-studio/deploy-vercel-from-sanity 0.1.3 → 0.1.6

package/dist/index.js

@@ -40,6 +40,7 @@ var import_icons2 = require("@sanity/icons");
 
 // src/lib/api.ts
 var BASE = "https://api.vercel.com";
+var VERCEL_HOOK_RE = /^https:\/\/api\.vercel\.com\/v1\/integrations\/deploy\//;
 async function vercelFetch(path, token, init) {
   const res = await fetch(`${BASE}${path}`, {
     ...init,
@@ -75,9 +76,22 @@ async function cancelDeployment(opts) {
   });
 }
 async function triggerDeploy(hookUrl) {
+  if (!VERCEL_HOOK_RE.test(hookUrl)) {
+    throw new Error("Invalid deploy hook URL \u2014 must be a Vercel hook (api.vercel.com/v1/integrations/deploy/\u2026)");
+  }
   const res = await fetch(hookUrl, { method: "POST" });
   if (!res.ok) throw new Error(`Deploy hook returned ${res.status}`);
 }
+async function getDeploymentEvents(opts) {
+  const params = new URLSearchParams({ limit: "100", direction: "backward" });
+  if (opts.teamId) params.set("teamId", opts.teamId);
+  const raw = await vercelFetch(
+    `/v2/deployments/${opts.deploymentId}/events?${params}`,
+    opts.token
+  );
+  const events = Array.isArray(raw) ? raw : raw.events ?? [];
+  return events.filter((e) => e.text?.trim());
+}
 
 // src/lib/helpers.ts
 function parseHookUrl(url) {
@@ -146,6 +160,17 @@ function stateLabel(state) {
       return { label: "Unknown", tone: "default" };
   }
 }
+function projectHref(inspectorUrl) {
+  if (!inspectorUrl) return null;
+  try {
+    const { origin, pathname } = new URL(inspectorUrl);
+    const parts = pathname.split("/").filter(Boolean);
+    if (parts.length < 2) return null;
+    return `${origin}/${parts[0]}/${parts[1]}`;
+  } catch {
+    return null;
+  }
+}
 
 // src/components/StatusBadge.tsx
 var import_ui = require("@sanity/ui");
@@ -259,6 +284,11 @@ function DeployItem({ target, token, onDelete }) {
   const [deployError, setDeployError] = (0, import_react2.useState)(null);
   const [showHistory, setShowHistory] = (0, import_react2.useState)(false);
   const [elapsed, setElapsed] = (0, import_react2.useState)(0);
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  const [showErrorLogs, setShowErrorLogs] = (0, import_react2.useState)(false);
+  const [errorLines, setErrorLines] = (0, import_react2.useState)([]);
+  const [loadingLogs, setLoadingLogs] = (0, import_react2.useState)(false);
+  const [logError, setLogError] = (0, import_react2.useState)(null);
   const latest = deployments[0];
   const isActive = triggering || isActiveState(latest?.state);
   const fetchDeployments = (0, import_react2.useCallback)(async () => {
@@ -279,10 +309,13 @@ function DeployItem({ target, token, onDelete }) {
     return () => clearInterval(id);
   }, [isActive, fetchDeployments]);
   (0, import_react2.useEffect)(() => {
-    if (triggering && latest && latest.state !== void 0) {
-      setTriggering(false);
-    }
+    if (triggering && latest && latest.state !== void 0) setTriggering(false);
   }, [triggering, latest]);
+  (0, import_react2.useEffect)(() => {
+    setShowErrorLogs(false);
+    setErrorLines([]);
+    setLogError(null);
+  }, [latest?.uid]);
   const timerRef = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
     if (isActive) {
@@ -322,118 +355,276 @@ function DeployItem({ target, token, onDelete }) {
       setCanceling(false);
     }
   }, [latest?.uid, token, target.teamId, fetchDeployments]);
+  const copyUrl = (0, import_react2.useCallback)(() => {
+    if (!latest?.url) return;
+    navigator.clipboard.writeText(`https://${latest.url}`).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }).catch((err) => {
+      console.error("deploy-vercel-from-sanity: clipboard error", err);
+    });
+  }, [latest?.url]);
+  const fetchErrorLogs = (0, import_react2.useCallback)(async () => {
+    if (!latest?.uid) return;
+    setLoadingLogs(true);
+    setLogError(null);
+    try {
+      const events = await getDeploymentEvents({
+        deploymentId: latest.uid,
+        token,
+        teamId: target.teamId
+      });
+      const lines = events.filter((e) => e.type === "stderr" || e.type === "stdout").map((e) => e.text ?? "").filter(Boolean).reverse().slice(-30);
+      setErrorLines(lines.length > 0 ? lines : ["No log output captured."]);
+    } catch (err) {
+      setLogError(err instanceof Error ? err.message : "Failed to load build logs");
+    } finally {
+      setLoadingLogs(false);
+    }
+  }, [latest?.uid, token, target.teamId]);
+  const toggleErrorLogs = (0, import_react2.useCallback)(() => {
+    if (!showErrorLogs && errorLines.length === 0 && !logError) {
+      fetchErrorLogs();
+    }
+    setShowErrorLogs((v) => !v);
+  }, [showErrorLogs, errorLines.length, logError, fetchErrorLogs]);
   const branch = latest?.meta?.githubCommitRef;
   const commitMsg = latest?.meta?.githubCommitMessage?.split("\n")[0];
   const sha = shortSha(latest?.meta?.githubCommitSha);
   const creator = latest?.creator?.username;
   const deployedAt = latest?.created ? timeAgo(latest.created) : null;
+  const vercelProjectUrl = projectHref(latest?.inspectorUrl);
+  const isError = latest?.state === "ERROR";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Card, { padding: 4, radius: 2, shadow: 1, tone: "default", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 4, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "flex-start", justify: "space-between", gap: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 2, flex: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Card, { padding: 4, radius: 2, shadow: 1, tone: "default", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { gap: 4, align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 2, flex: 1, style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", justify: "space-between", gap: 2, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 2, weight: "semibold", children: target.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { gap: 2, wrap: "wrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 0, muted: true, children: projectId ? `${projectId.slice(0, 18)}\u2026` : "\u2014" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_ui3.MenuButton,
+            {
+              button: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Button, { mode: "ghost", icon: import_icons2.EllipsisVerticalIcon, padding: 2 }),
+              id: `menu-${target._id}`,
+              menu: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Menu, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_ui3.MenuItem,
+                  {
+                    text: "History",
+                    icon: import_icons2.ClockIcon,
+                    onClick: () => setShowHistory(true)
+                  }
+                ),
+                safeHref(latest?.inspectorUrl) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_ui3.MenuItem,
+                  {
+                    text: "Build logs",
+                    icon: import_icons2.LaunchIcon,
+                    as: "a",
+                    href: safeHref(latest?.inspectorUrl),
+                    target: "_blank",
+                    rel: "noreferrer"
+                  }
+                ),
+                vercelProjectUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_ui3.MenuItem,
+                  {
+                    text: "Open in Vercel",
+                    icon: import_icons2.LaunchIcon,
+                    as: "a",
+                    href: vercelProjectUrl,
+                    target: "_blank",
+                    rel: "noreferrer"
+                  }
+                ),
+                !target.disableDeleteAction && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_ui3.MenuItem,
+                  {
+                    text: "Delete",
+                    icon: import_icons2.TrashIcon,
+                    tone: "critical",
+                    onClick: () => onDelete(target)
+                  }
+                )
+              ] }),
+              popover: { placement: "bottom-end" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { gap: 2, wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 0, muted: true, children: projectId ? `${projectId.slice(0, 18)}\u2026` : "\u2014" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 0, muted: true, children: "\xB7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Text, { size: 0, muted: true, children: [
+            "Hook: ",
+            hookId || "\u2014"
+          ] }),
+          target.teamId && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 0, muted: true, children: "\xB7" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Text, { size: 0, muted: true, children: [
-              "Hook: ",
-              hookId || "\u2014"
-            ] }),
-            target.teamId && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 0, muted: true, children: "\xB7" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Text, { size: 0, muted: true, children: [
-                "Team: ",
-                target.teamId
-              ] })
+              "Team: ",
+              target.teamId
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_ui3.MenuButton,
-          {
-            button: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Button, { mode: "ghost", icon: import_icons2.EllipsisVerticalIcon }),
-            id: `menu-${target._id}`,
-            menu: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Menu, { children: [
+        loadingInitial ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Spinner, { muted: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: "Loading\u2026" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 2, wrap: "wrap", children: [
+            triggering ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Spinner, { muted: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Badge, { tone: "caution", mode: "outline", children: "Triggering\u2026" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge, { state: latest?.state, showSpinner: true }),
+            isActive && elapsed > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 1, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.ClockIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: formatDuration(elapsed) })
+            ] }) : !isActive && deployedAt ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: deployedAt }) : null,
+            branch && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: "\xB7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Badge, { tone: "default", mode: "outline", children: branch })
+            ] }),
+            sha && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_ui3.Tooltip,
+              {
+                content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Box, { padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, children: commitMsg ?? sha }) }),
+                portal: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_ui3.Text,
+                  {
+                    size: 1,
+                    muted: true,
+                    style: { cursor: "default", fontFamily: "monospace" },
+                    children: sha
+                  }
+                )
+              }
+            ),
+            creator && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Text, { size: 1, muted: true, children: [
+              "by ",
+              creator
+            ] }),
+            latest?.url && latest.state === "READY" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                import_ui3.MenuItem,
-                {
-                  text: "History",
-                  icon: import_icons2.ClockIcon,
-                  onClick: () => setShowHistory(true)
-                }
-              ),
-              safeHref(latest?.inspectorUrl) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                import_ui3.MenuItem,
+                "a",
                 {
-                  text: "Build logs",
-                  icon: import_icons2.LaunchIcon,
-                  as: "a",
-                  href: safeHref(latest?.inspectorUrl),
+                  href: `https://${latest.url}`,
                   target: "_blank",
-                  rel: "noreferrer"
+                  rel: "noreferrer",
+                  style: { color: "inherit" },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 1, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.LaunchIcon, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, children: "Preview" })
+                  ] })
                 }
               ),
-              !target.disableDeleteAction && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                import_ui3.MenuItem,
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_ui3.Tooltip,
                 {
-                  text: "Delete",
-                  icon: import_icons2.TrashIcon,
-                  tone: "critical",
-                  onClick: () => onDelete(target)
+                  content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Box, { padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, children: copied ? "Copied!" : "Copy URL" }) }),
+                  portal: true,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_ui3.Button,
+                    {
+                      mode: "ghost",
+                      icon: copied ? import_icons2.CheckmarkIcon : import_icons2.CopyIcon,
+                      padding: 1,
+                      tone: copied ? "positive" : "default",
+                      onClick: copyUrl
+                    }
+                  )
                 }
               )
-            ] }),
-            popover: { placement: "bottom-end" }
-          }
-        )
-      ] }),
-      loadingInitial ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Spinner, { muted: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: "Loading\u2026" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 3, wrap: "wrap", children: [
-          triggering ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Spinner, { muted: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Badge, { tone: "caution", mode: "outline", children: "Triggering\u2026" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge, { state: latest?.state, showSpinner: true }),
-          isActive && elapsed > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.ClockIcon, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: formatDuration(elapsed) })
-          ] }),
-          !isActive && deployedAt && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: deployedAt }),
-          branch && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: "\xB7" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Badge, { tone: "default", mode: "outline", children: branch })
+            ] })
           ] }),
-          sha && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_ui3.Tooltip,
+          commitMsg && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_ui3.Text,
             {
-              content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Box, { padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, children: commitMsg ?? sha }) }),
-              portal: true,
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, style: { cursor: "default" }, children: sha })
+              size: 0,
+              muted: true,
+              style: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: commitMsg
             }
           ),
-          creator && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Text, { size: 1, muted: true, children: [
-            "by ",
-            creator
-          ] }),
-          latest?.url && latest.state === "READY" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "a",
-            {
-              href: `https://${latest.url}`,
-              target: "_blank",
-              rel: "noreferrer",
-              style: { color: "inherit" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 1, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.LaunchIcon, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, children: "Preview" })
+          isError && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_ui3.Button,
+              {
+                text: showErrorLogs ? "Hide error details" : "Show error details",
+                mode: "ghost",
+                tone: "critical",
+                icon: import_icons2.WarningOutlineIcon,
+                fontSize: 1,
+                padding: 2,
+                onClick: toggleErrorLogs,
+                style: { alignSelf: "flex-start" }
+              }
+            ),
+            showErrorLogs && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Card, { tone: "critical", radius: 2, padding: 3, children: [
+              loadingLogs && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Spinner, { muted: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: "Loading logs\u2026" })
+              ] }),
+              logError && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, children: logError }),
+                safeHref(latest?.inspectorUrl) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "a",
+                  {
+                    href: safeHref(latest?.inspectorUrl),
+                    target: "_blank",
+                    rel: "noreferrer",
+                    style: { color: "inherit" },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 1, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.LaunchIcon, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, children: "View full logs in Vercel" })
+                    ] })
+                  }
+                )
+              ] }),
+              !loadingLogs && !logError && errorLines.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_ui3.Box,
+                  {
+                    style: {
+                      maxHeight: 240,
+                      overflowY: "auto",
+                      fontFamily: "monospace",
+                      fontSize: 11,
+                      lineHeight: 1.6
+                    },
+                    children: errorLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_ui3.Code,
+                      {
+                        size: 1,
+                        style: { display: "block", whiteSpace: "pre-wrap", wordBreak: "break-all" },
+                        children: line
+                      },
+                      i
+                    ))
+                  }
+                ),
+                safeHref(latest?.inspectorUrl) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "a",
+                  {
+                    href: safeHref(latest?.inspectorUrl),
+                    target: "_blank",
+                    rel: "noreferrer",
+                    style: { color: "inherit" },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 1, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.LaunchIcon, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, children: "View full logs in Vercel" })
+                    ] })
+                  }
+                )
               ] })
-            }
-          )
-        ] }),
-        deployError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Card, { tone: "critical", padding: 2, radius: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, children: deployError }) })
+            ] })
+          ] }),
+          deployError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Card, { tone: "critical", padding: 2, radius: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, children: deployError }) })
+        ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", justify: "flex-end", gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 2, style: { flexShrink: 0 }, children: [
         isActiveState(latest?.state) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_ui3.Button,
           {
@@ -475,7 +666,7 @@ var import_sanity = require("sanity");
 var import_ui4 = require("@sanity/ui");
 var import_icons3 = require("@sanity/icons");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var TOKEN_DOC_ID = "secrets.vercelDeploy";
+var TOKEN_DOC_ID = "config.vercelDeploy";
 function TokenSetup({ onSaved }) {
   const client = (0, import_sanity.useClient)({ apiVersion: "2025-01-01" });
   const [token, setToken] = (0, import_react3.useState)("");
@@ -548,7 +739,7 @@ function TokenSetup({ onSaved }) {
 
 // src/components/DeployTool.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var TOKEN_QUERY = `*[_id == "secrets.vercelDeploy"][0].accessToken`;
+var TOKEN_QUERY = `*[_id == "config.vercelDeploy"][0].accessToken`;
 var TARGETS_QUERY = `*[_type == "vercel_deploy"] | order(_createdAt asc)`;
 function DeployTool() {
   const client = (0, import_sanity2.useClient)({ apiVersion: "2025-01-01" });
@@ -602,13 +793,7 @@ function DeployTool() {
   if (loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Card, { height: "fill", tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Flex, { align: "center", justify: "center", height: "fill", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Spinner, { muted: true }) }) });
   }
-  if (!token && !showTokenSetup) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TokenSetup, { onSaved: () => {
-      setShowTokenSetup(false);
-      load();
-    } });
-  }
-  if (showTokenSetup) {
+  if (!token || showTokenSetup) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       TokenSetup,
       {
@@ -626,26 +811,33 @@ function DeployTool() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.RocketIcon, {}),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Heading, { size: 2, children: "Deploy" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_ui5.Button,
-          {
-            text: "API Token",
-            mode: "ghost",
-            icon: import_icons4.TokenIcon,
-            fontSize: 1,
-            onClick: () => setShowTokenSetup(true)
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Badge, { tone: "positive", mode: "outline", children: "Connected" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_ui5.Button,
+            {
+              text: "Change Token",
+              mode: "ghost",
+              icon: import_icons4.TokenIcon,
+              fontSize: 1,
+              onClick: () => setShowTokenSetup(true)
+            }
+          )
+        ] })
       ] }),
       targets.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Card, { padding: 5, radius: 2, tone: "transparent", shadow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Stack, { space: 3, style: { textAlign: "center" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Text, { size: 2, weight: "semibold", children: "No deploy targets configured" }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Text, { size: 1, muted: true, children: [
           "Create a ",
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { children: "vercel_deploy" }),
-          " document in the dataset with a Vercel deploy hook URL, or add one via the Sanity CLI."
+          " document in the dataset with a Vercel deploy hook URL."
         ] })
       ] }) }),
-      token && targets.map((target) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      targets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(380px, 1fr))",
+        gap: "12px"
+      }, children: targets.map((target) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         DeployItem,
         {
           target,
@@ -653,7 +845,7 @@ function DeployTool() {
           onDelete: setPendingDelete
         },
         target._id
-      ))
+      )) })
     ] }) }),
     pendingDelete && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_ui5.Dialog,