@liiift-studio/deploy-vercel-from-sanity 0.1.4 → 0.1.7

package/dist/index.mjs

@@ -14,10 +14,11 @@ import {
   Heading as Heading2,
   Spinner as Spinner4,
   Button as Button4,
+  Badge as Badge4,
   Dialog as Dialog2,
   useToast
 } from "@sanity/ui";
-import { RocketIcon as RocketIcon2, TokenIcon as TokenIcon2, TrashIcon as TrashIcon2, WarningOutlineIcon } from "@sanity/icons";
+import { RocketIcon as RocketIcon2, TokenIcon as TokenIcon2, TrashIcon as TrashIcon2, WarningOutlineIcon as WarningOutlineIcon2 } from "@sanity/icons";
 
 // src/components/DeployItem.tsx
 import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2, useRef } from "react";
@@ -33,18 +34,23 @@ import {
   Spinner as Spinner3,
   MenuButton,
   Menu,
-  MenuItem
+  MenuItem,
+  Code
 } from "@sanity/ui";
 import {
   RocketIcon,
   ClockIcon,
   TrashIcon,
   EllipsisVerticalIcon,
-  LaunchIcon as LaunchIcon2
+  LaunchIcon as LaunchIcon2,
+  CopyIcon,
+  CheckmarkIcon,
+  WarningOutlineIcon
 } from "@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,
@@ -80,9 +86,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) {
@@ -151,6 +170,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
 import { Badge, Spinner, Flex } from "@sanity/ui";
@@ -274,6 +304,11 @@ function DeployItem({ target, token, onDelete }) {
   const [deployError, setDeployError] = useState2(null);
   const [showHistory, setShowHistory] = useState2(false);
   const [elapsed, setElapsed] = useState2(0);
+  const [copied, setCopied] = useState2(false);
+  const [showErrorLogs, setShowErrorLogs] = useState2(false);
+  const [errorLines, setErrorLines] = useState2([]);
+  const [loadingLogs, setLoadingLogs] = useState2(false);
+  const [logError, setLogError] = useState2(null);
   const latest = deployments[0];
   const isActive = triggering || isActiveState(latest?.state);
   const fetchDeployments = useCallback2(async () => {
@@ -294,10 +329,13 @@ function DeployItem({ target, token, onDelete }) {
     return () => clearInterval(id);
   }, [isActive, fetchDeployments]);
   useEffect2(() => {
-    if (triggering && latest && latest.state !== void 0) {
-      setTriggering(false);
-    }
+    if (triggering && latest && latest.state !== void 0) setTriggering(false);
   }, [triggering, latest]);
+  useEffect2(() => {
+    setShowErrorLogs(false);
+    setErrorLines([]);
+    setLogError(null);
+  }, [latest?.uid]);
   const timerRef = useRef(null);
   useEffect2(() => {
     if (isActive) {
@@ -337,141 +375,308 @@ function DeployItem({ target, token, onDelete }) {
       setCanceling(false);
     }
   }, [latest?.uid, token, target.teamId, fetchDeployments]);
+  const copyUrl = useCallback2(() => {
+    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 = useCallback2(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 = useCallback2(() => {
+    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__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx3(Card2, { padding: 4, radius: 2, shadow: 1, tone: "default", children: /* @__PURE__ */ jsxs3(Stack2, { space: 4, children: [
-      /* @__PURE__ */ jsxs3(Flex3, { align: "flex-start", justify: "space-between", gap: 3, children: [
-        /* @__PURE__ */ jsxs3(Stack2, { space: 2, flex: 1, children: [
+    /* @__PURE__ */ jsx3(Card2, { padding: 5, radius: 2, shadow: 1, tone: "default", children: /* @__PURE__ */ jsxs3(Flex3, { gap: 4, align: "stretch", children: [
+      /* @__PURE__ */ jsxs3(Stack2, { space: 3, flex: 1, style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs3(Flex3, { align: "center", justify: "space-between", gap: 2, children: [
           /* @__PURE__ */ jsx3(Text2, { size: 2, weight: "semibold", children: target.name }),
-          /* @__PURE__ */ jsxs3(Flex3, { gap: 2, wrap: "wrap", children: [
-            /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, children: projectId ? `${projectId.slice(0, 18)}\u2026` : "\u2014" }),
+          /* @__PURE__ */ jsx3(
+            MenuButton,
+            {
+              button: /* @__PURE__ */ jsx3(Button2, { mode: "ghost", icon: EllipsisVerticalIcon, padding: 2 }),
+              id: `menu-${target._id}`,
+              menu: /* @__PURE__ */ jsxs3(Menu, { children: [
+                /* @__PURE__ */ jsx3(
+                  MenuItem,
+                  {
+                    text: "History",
+                    icon: ClockIcon,
+                    onClick: () => setShowHistory(true)
+                  }
+                ),
+                safeHref(latest?.inspectorUrl) && /* @__PURE__ */ jsx3(
+                  MenuItem,
+                  {
+                    text: "Build logs",
+                    icon: LaunchIcon2,
+                    as: "a",
+                    href: safeHref(latest?.inspectorUrl),
+                    target: "_blank",
+                    rel: "noreferrer"
+                  }
+                ),
+                vercelProjectUrl && /* @__PURE__ */ jsx3(
+                  MenuItem,
+                  {
+                    text: "Open in Vercel",
+                    icon: LaunchIcon2,
+                    as: "a",
+                    href: vercelProjectUrl,
+                    target: "_blank",
+                    rel: "noreferrer"
+                  }
+                ),
+                !target.disableDeleteAction && /* @__PURE__ */ jsx3(
+                  MenuItem,
+                  {
+                    text: "Delete",
+                    icon: TrashIcon,
+                    tone: "critical",
+                    onClick: () => onDelete(target)
+                  }
+                )
+              ] }),
+              popover: { placement: "bottom-end" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3(Flex3, { gap: 2, wrap: "wrap", children: [
+          /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, children: projectId ? `${projectId.slice(0, 18)}\u2026` : "\u2014" }),
+          /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, children: "\xB7" }),
+          /* @__PURE__ */ jsxs3(Text2, { size: 0, muted: true, children: [
+            "Hook: ",
+            hookId || "\u2014"
+          ] }),
+          target.teamId && /* @__PURE__ */ jsxs3(Fragment, { children: [
             /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, children: "\xB7" }),
             /* @__PURE__ */ jsxs3(Text2, { size: 0, muted: true, children: [
-              "Hook: ",
-              hookId || "\u2014"
-            ] }),
-            target.teamId && /* @__PURE__ */ jsxs3(Fragment, { children: [
-              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, children: "\xB7" }),
-              /* @__PURE__ */ jsxs3(Text2, { size: 0, muted: true, children: [
-                "Team: ",
-                target.teamId
-              ] })
+              "Team: ",
+              target.teamId
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx3(
-          MenuButton,
-          {
-            button: /* @__PURE__ */ jsx3(Button2, { mode: "ghost", icon: EllipsisVerticalIcon }),
-            id: `menu-${target._id}`,
-            menu: /* @__PURE__ */ jsxs3(Menu, { children: [
+        loadingInitial ? /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx3(Spinner3, { muted: true }),
+          /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: "Loading\u2026" })
+        ] }) : /* @__PURE__ */ jsxs3(Stack2, { space: 2, children: [
+          /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 2, wrap: "wrap", children: [
+            triggering ? /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ jsx3(Spinner3, { muted: true }),
+              /* @__PURE__ */ jsx3(Badge3, { tone: "caution", mode: "outline", children: "Triggering\u2026" })
+            ] }) : /* @__PURE__ */ jsx3(StatusBadge, { state: latest?.state, showSpinner: true }),
+            isActive && elapsed > 0 ? /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
+              /* @__PURE__ */ jsx3(ClockIcon, {}),
+              /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: formatDuration(elapsed) })
+            ] }) : !isActive && deployedAt ? /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: deployedAt }) : null,
+            branch && /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: "\xB7" }),
+              /* @__PURE__ */ jsx3(Badge3, { tone: "default", mode: "outline", children: branch })
+            ] }),
+            sha && /* @__PURE__ */ jsx3(
+              Tooltip,
+              {
+                content: /* @__PURE__ */ jsx3(Box2, { padding: 2, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: commitMsg ?? sha }) }),
+                portal: true,
+                children: /* @__PURE__ */ jsx3(
+                  Text2,
+                  {
+                    size: 1,
+                    muted: true,
+                    style: { cursor: "default", fontFamily: "monospace" },
+                    children: sha
+                  }
+                )
+              }
+            ),
+            creator && /* @__PURE__ */ jsxs3(Text2, { size: 1, muted: true, children: [
+              "by ",
+              creator
+            ] }),
+            latest?.url && latest.state === "READY" && /* @__PURE__ */ jsxs3(Fragment, { children: [
               /* @__PURE__ */ jsx3(
-                MenuItem,
-                {
-                  text: "History",
-                  icon: ClockIcon,
-                  onClick: () => setShowHistory(true)
-                }
-              ),
-              safeHref(latest?.inspectorUrl) && /* @__PURE__ */ jsx3(
-                MenuItem,
+                "a",
                 {
-                  text: "Build logs",
-                  icon: LaunchIcon2,
-                  as: "a",
-                  href: safeHref(latest?.inspectorUrl),
+                  href: `https://${latest.url}`,
                   target: "_blank",
-                  rel: "noreferrer"
+                  rel: "noreferrer",
+                  style: { color: "inherit" },
+                  children: /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
+                    /* @__PURE__ */ jsx3(LaunchIcon2, {}),
+                    /* @__PURE__ */ jsx3(Text2, { size: 1, children: "Preview" })
+                  ] })
                 }
               ),
-              !target.disableDeleteAction && /* @__PURE__ */ jsx3(
-                MenuItem,
+              /* @__PURE__ */ jsx3(
+                Tooltip,
                 {
-                  text: "Delete",
-                  icon: TrashIcon,
-                  tone: "critical",
-                  onClick: () => onDelete(target)
+                  content: /* @__PURE__ */ jsx3(Box2, { padding: 2, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: copied ? "Copied!" : "Copy URL" }) }),
+                  portal: true,
+                  children: /* @__PURE__ */ jsx3(
+                    Button2,
+                    {
+                      mode: "ghost",
+                      icon: copied ? CheckmarkIcon : CopyIcon,
+                      padding: 1,
+                      tone: copied ? "positive" : "default",
+                      onClick: copyUrl
+                    }
+                  )
                 }
               )
-            ] }),
-            popover: { placement: "bottom-end" }
-          }
-        )
-      ] }),
-      loadingInitial ? /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 2, children: [
-        /* @__PURE__ */ jsx3(Spinner3, { muted: true }),
-        /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: "Loading\u2026" })
-      ] }) : /* @__PURE__ */ jsxs3(Stack2, { space: 3, children: [
-        /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 3, wrap: "wrap", children: [
-          triggering ? /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 2, children: [
-            /* @__PURE__ */ jsx3(Spinner3, { muted: true }),
-            /* @__PURE__ */ jsx3(Badge3, { tone: "caution", mode: "outline", children: "Triggering\u2026" })
-          ] }) : /* @__PURE__ */ jsx3(StatusBadge, { state: latest?.state, showSpinner: true }),
-          isActive && elapsed > 0 && /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
-            /* @__PURE__ */ jsx3(ClockIcon, {}),
-            /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: formatDuration(elapsed) })
-          ] }),
-          !isActive && deployedAt && /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: deployedAt }),
-          branch && /* @__PURE__ */ jsxs3(Fragment, { children: [
-            /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: "\xB7" }),
-            /* @__PURE__ */ jsx3(Badge3, { tone: "default", mode: "outline", children: branch })
+            ] })
           ] }),
-          sha && /* @__PURE__ */ jsx3(
-            Tooltip,
+          commitMsg && /* @__PURE__ */ jsx3(
+            Text2,
             {
-              content: /* @__PURE__ */ jsx3(Box2, { padding: 2, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: commitMsg ?? sha }) }),
-              portal: true,
-              children: /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, style: { cursor: "default" }, children: sha })
+              size: 0,
+              muted: true,
+              style: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: commitMsg
             }
           ),
-          creator && /* @__PURE__ */ jsxs3(Text2, { size: 1, muted: true, children: [
-            "by ",
-            creator
-          ] }),
-          latest?.url && latest.state === "READY" && /* @__PURE__ */ jsx3(
-            "a",
-            {
-              href: `https://${latest.url}`,
-              target: "_blank",
-              rel: "noreferrer",
-              style: { color: "inherit" },
-              children: /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
-                /* @__PURE__ */ jsx3(LaunchIcon2, {}),
-                /* @__PURE__ */ jsx3(Text2, { size: 1, children: "Preview" })
+          isError && /* @__PURE__ */ jsxs3(Stack2, { space: 2, children: [
+            /* @__PURE__ */ jsx3(
+              Button2,
+              {
+                text: showErrorLogs ? "Hide error details" : "Show error details",
+                mode: "ghost",
+                tone: "critical",
+                icon: WarningOutlineIcon,
+                fontSize: 1,
+                padding: 2,
+                onClick: toggleErrorLogs,
+                style: { alignSelf: "flex-start" }
+              }
+            ),
+            showErrorLogs && /* @__PURE__ */ jsxs3(Card2, { tone: "critical", radius: 2, padding: 3, children: [
+              loadingLogs && /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 2, children: [
+                /* @__PURE__ */ jsx3(Spinner3, { muted: true }),
+                /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: "Loading logs\u2026" })
+              ] }),
+              logError && /* @__PURE__ */ jsxs3(Stack2, { space: 2, children: [
+                /* @__PURE__ */ jsx3(Text2, { size: 1, children: logError }),
+                safeHref(latest?.inspectorUrl) && /* @__PURE__ */ jsx3(
+                  "a",
+                  {
+                    href: safeHref(latest?.inspectorUrl),
+                    target: "_blank",
+                    rel: "noreferrer",
+                    style: { color: "inherit" },
+                    children: /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
+                      /* @__PURE__ */ jsx3(LaunchIcon2, {}),
+                      /* @__PURE__ */ jsx3(Text2, { size: 1, children: "View full logs in Vercel" })
+                    ] })
+                  }
+                )
+              ] }),
+              !loadingLogs && !logError && errorLines.length > 0 && /* @__PURE__ */ jsxs3(Stack2, { space: 2, children: [
+                /* @__PURE__ */ jsx3(
+                  Box2,
+                  {
+                    style: {
+                      maxHeight: 240,
+                      overflowY: "auto",
+                      fontFamily: "monospace",
+                      fontSize: 11,
+                      lineHeight: 1.6
+                    },
+                    children: errorLines.map((line, i) => /* @__PURE__ */ jsx3(
+                      Code,
+                      {
+                        size: 1,
+                        style: { display: "block", whiteSpace: "pre-wrap", wordBreak: "break-all" },
+                        children: line
+                      },
+                      i
+                    ))
+                  }
+                ),
+                safeHref(latest?.inspectorUrl) && /* @__PURE__ */ jsx3(
+                  "a",
+                  {
+                    href: safeHref(latest?.inspectorUrl),
+                    target: "_blank",
+                    rel: "noreferrer",
+                    style: { color: "inherit" },
+                    children: /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
+                      /* @__PURE__ */ jsx3(LaunchIcon2, {}),
+                      /* @__PURE__ */ jsx3(Text2, { size: 1, children: "View full logs in Vercel" })
+                    ] })
+                  }
+                )
               ] })
-            }
-          )
-        ] }),
-        deployError && /* @__PURE__ */ jsx3(Card2, { tone: "critical", padding: 2, radius: 2, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: deployError }) })
+            ] })
+          ] }),
+          deployError && /* @__PURE__ */ jsx3(Card2, { tone: "critical", padding: 2, radius: 2, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: deployError }) })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs3(Flex3, { align: "center", justify: "flex-end", gap: 2, children: [
-        isActiveState(latest?.state) && /* @__PURE__ */ jsx3(
-          Button2,
-          {
-            text: "Cancel",
-            mode: "ghost",
-            tone: "critical",
-            loading: canceling,
-            disabled: canceling,
-            onClick: cancel
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Button2,
-          {
-            text: "Deploy",
-            tone: "primary",
-            icon: RocketIcon,
-            loading: triggering,
-            disabled: isActive,
-            onClick: deploy
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsxs3(
+        Flex3,
+        {
+          direction: "column",
+          gap: 2,
+          style: { flexShrink: 0, alignSelf: "stretch" },
+          children: [
+            isActiveState(latest?.state) && /* @__PURE__ */ jsx3(
+              Button2,
+              {
+                text: "Cancel",
+                mode: "ghost",
+                tone: "critical",
+                loading: canceling,
+                disabled: canceling,
+                onClick: cancel
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              Button2,
+              {
+                text: "Deploy",
+                tone: "primary",
+                icon: RocketIcon,
+                loading: triggering,
+                disabled: isActive,
+                onClick: deploy,
+                style: { flex: 1 }
+              }
+            )
+          ]
+        }
+      )
     ] }) }),
     showHistory && /* @__PURE__ */ jsx3(
       DeployHistory,
@@ -625,13 +830,7 @@ function DeployTool() {
   if (loading) {
     return /* @__PURE__ */ jsx5(Card4, { height: "fill", tone: "transparent", children: /* @__PURE__ */ jsx5(Flex5, { align: "center", justify: "center", height: "fill", children: /* @__PURE__ */ jsx5(Spinner4, { muted: true }) }) });
   }
-  if (!token && !showTokenSetup) {
-    return /* @__PURE__ */ jsx5(TokenSetup, { onSaved: () => {
-      setShowTokenSetup(false);
-      load();
-    } });
-  }
-  if (showTokenSetup) {
+  if (!token || showTokenSetup) {
     return /* @__PURE__ */ jsx5(
       TokenSetup,
       {
@@ -649,26 +848,33 @@ function DeployTool() {
           /* @__PURE__ */ jsx5(RocketIcon2, {}),
           /* @__PURE__ */ jsx5(Heading2, { size: 2, children: "Deploy" })
         ] }),
-        /* @__PURE__ */ jsx5(
-          Button4,
-          {
-            text: "API Token",
-            mode: "ghost",
-            icon: TokenIcon2,
-            fontSize: 1,
-            onClick: () => setShowTokenSetup(true)
-          }
-        )
+        /* @__PURE__ */ jsxs5(Flex5, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx5(Badge4, { tone: "positive", mode: "outline", children: "Connected" }),
+          /* @__PURE__ */ jsx5(
+            Button4,
+            {
+              text: "Change Token",
+              mode: "ghost",
+              icon: TokenIcon2,
+              fontSize: 1,
+              onClick: () => setShowTokenSetup(true)
+            }
+          )
+        ] })
       ] }),
       targets.length === 0 && /* @__PURE__ */ jsx5(Card4, { padding: 5, radius: 2, tone: "transparent", shadow: 1, children: /* @__PURE__ */ jsxs5(Stack4, { space: 3, style: { textAlign: "center" }, children: [
         /* @__PURE__ */ jsx5(Text4, { size: 2, weight: "semibold", children: "No deploy targets configured" }),
         /* @__PURE__ */ jsxs5(Text4, { size: 1, muted: true, children: [
           "Create a ",
           /* @__PURE__ */ jsx5("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__ */ jsx5(
+      targets.length > 0 && /* @__PURE__ */ jsx5("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(540px, 1fr))",
+        gap: "16px"
+      }, children: targets.map((target) => /* @__PURE__ */ jsx5(
         DeployItem,
         {
           target,
@@ -676,7 +882,7 @@ function DeployTool() {
           onDelete: setPendingDelete
         },
         target._id
-      ))
+      )) })
     ] }) }),
     pendingDelete && /* @__PURE__ */ jsx5(
       Dialog2,
@@ -708,7 +914,7 @@ function DeployTool() {
         ] }),
         children: /* @__PURE__ */ jsx5(Box4, { padding: 4, children: /* @__PURE__ */ jsxs5(Stack4, { space: 3, children: [
           /* @__PURE__ */ jsxs5(Flex5, { align: "center", gap: 2, children: [
-            /* @__PURE__ */ jsx5(WarningOutlineIcon, {}),
+            /* @__PURE__ */ jsx5(WarningOutlineIcon2, {}),
             /* @__PURE__ */ jsx5(Text4, { size: 2, weight: "semibold", children: pendingDelete.name })
           ] }),
           /* @__PURE__ */ jsx5(Text4, { size: 1, muted: true, children: "This removes the deploy target from the dataset. The Vercel deploy hook itself is not affected." })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liiift-studio/deploy-vercel-from-sanity",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "Sanity Studio v5 plugin — trigger and monitor Vercel deployments with full status, history, and build logs",
   "license": "MIT",
   "author": "Liiift Studio",