@liiift-studio/deploy-vercel-from-sanity 0.2.2 → 1.0.1

package/README.md

@@ -16,7 +16,9 @@
 - **Live status** with automatic polling — Queued → Building → Ready / Error
 - **Build timer** showing elapsed time while a deploy is in progress
 - **Cancel** in-progress deployments
+- **Deploy-complete notifications** — Studio toast when a build finishes, errors, or is canceled
 - **Copy deployment URL** with one click
+- **GitHub commit links** — commit SHA links directly to the GitHub commit when repo metadata is available
 - **Inline error log viewer** — see build errors without leaving the studio
 - **Deployment history** per target
 - **"Open in Vercel"** link to your project dashboard
@@ -122,6 +124,41 @@ tools: (prev, { currentUser }) => {
 3. While a deployment is active (Queued / Initializing / Building), it polls every 5 seconds.
 4. Clicking **Deploy** POSTs to the hook URL — Vercel queues a new build.
 5. If a deploy fails, clicking **Show error details** fetches the last 30 build log lines from the Vercel API inline.
+6. A Studio toast notification fires when a deployment completes (Ready, Error, or Canceled).
+
+> **Polling and rate limits** — Active deployments are polled every 5 seconds per target. With many simultaneous active deploys, API call volume adds up. Vercel's rate limit is generous for normal use, but studios with a large number of targets triggering concurrently may hit `429` errors. The plugin surfaces these with a clear message.
+
+---
+
+## Troubleshooting
+
+### "Token is invalid or expired"
+
+Your Vercel API token has been revoked or expired. Go to **Vercel → Settings → Tokens**, create a new token with **Full Account** scope, and reconnect it in the Deploy tab (top-right → *Token connected* button).
+
+### "Token lacks the required permissions"
+
+The token exists but was created with insufficient scope. Vercel tokens need **Full Account** scope to read deployments. Delete the token and create a new one with the correct scope.
+
+### "Resource not found — check the deploy hook URL and team ID"
+
+Either the deploy hook URL is incorrect, or the project belongs to a Vercel team and the **Team ID** field is missing from the deploy target. Find your Team ID at **Vercel → Settings → General → Team ID** (starts with `team_`) and add it to the deploy target via the edit menu.
+
+### "Rate limit reached"
+
+The plugin is making too many API calls at once (common when many targets are all actively building). Wait a few seconds — polling will resume automatically.
+
+### Deploy triggers but status never updates
+
+This usually means the token is missing. The plugin can trigger deploys via hook URL without a token, but it needs an API token to read back deployment status. Connect a token using the button in the top-right of the Deploy tab.
+
+### Commit SHA does not link to GitHub
+
+The SHA link requires Vercel to return GitHub repo metadata with the deployment. This is present on deployments triggered by GitHub pushes but not on manually triggered hook deploys. Manually triggered deploys will show the SHA as plain text with a tooltip.
+
+### No error logs shown after a failed build
+
+If "No stderr or stdout was captured" appears, the build may have failed before producing log output, or the events API returned no lines. Use **Open in Vercel** to view the full build log in the Vercel dashboard.
 
 ---
 

package/dist/index.d.mts

@@ -33,6 +33,10 @@ interface VercelDeployment {
         githubCommitRef?: string;
         githubCommitSha?: string;
         githubCommitAuthorName?: string;
+        /** GitHub repo in "org/repo" format — used to construct commit links */
+        githubRepo?: string;
+        /** GitHub org slug — fallback when githubRepo is absent */
+        githubCommitOrg?: string;
     };
 }
 /** Plugin configuration options */

package/dist/index.d.ts

@@ -33,6 +33,10 @@ interface VercelDeployment {
         githubCommitRef?: string;
         githubCommitSha?: string;
         githubCommitAuthorName?: string;
+        /** GitHub repo in "org/repo" format — used to construct commit links */
+        githubRepo?: string;
+        /** GitHub org slug — fallback when githubRepo is absent */
+        githubCommitOrg?: string;
     };
 }
 /** Plugin configuration options */

package/dist/index.js

@@ -35,6 +35,7 @@ var import_icons5 = require("@sanity/icons");
 
 // src/components/DeployItem.tsx
 var import_react2 = require("react");
+var import_react_dom = require("react-dom");
 var import_ui3 = require("@sanity/ui");
 var import_icons2 = require("@sanity/icons");
 
@@ -51,8 +52,8 @@ async function vercelFetch(path, token, init) {
     }
   });
   if (!res.ok) {
-    const text = await res.text().catch(() => res.statusText);
-    throw new Error(`Vercel API ${res.status}: ${text}`);
+    const hint = res.status === 401 ? " \u2014 token is invalid or expired. Reconnect your API token." : res.status === 403 ? " \u2014 token lacks the required permissions. Ensure it has Full Account scope." : res.status === 404 ? " \u2014 resource not found. Check the deploy hook URL and team ID." : res.status === 429 ? " \u2014 rate limit reached. Wait a moment and try again." : res.status >= 500 ? " \u2014 Vercel is experiencing issues. Try again shortly." : "";
+    throw new Error(`Vercel API ${res.status}${hint}`);
   }
   return res.json();
 }
@@ -160,6 +161,12 @@ function stateLabel(state) {
       return { label: "Unknown", tone: "default" };
   }
 }
+function githubCommitHref(meta) {
+  if (!meta?.githubCommitSha) return null;
+  const repo = meta.githubRepo ?? null;
+  if (!repo) return null;
+  return `https://github.com/${repo}/commit/${meta.githubCommitSha}`;
+}
 function projectHref(inspectorUrl) {
   if (!inspectorUrl) return null;
   try {
@@ -278,6 +285,7 @@ var POLL_INTERVAL_MS = 5e3;
 var LABEL_WIDTH = 64;
 function DeployItem({ target, token, onDelete, onEdit }) {
   const { projectId, hookId } = parseHookUrl(target.url);
+  const toast = (0, import_ui3.useToast)();
   const [deployments, setDeployments] = (0, import_react2.useState)([]);
   const [loadingInitial, setLoadingInitial] = (0, import_react2.useState)(true);
   const [triggering, setTriggering] = (0, import_react2.useState)(false);
@@ -313,6 +321,21 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   (0, import_react2.useEffect)(() => {
     if (triggering && latest && latest.state !== void 0) setTriggering(false);
   }, [triggering, latest]);
+  const prevStateRef = (0, import_react2.useRef)(void 0);
+  (0, import_react2.useEffect)(() => {
+    const current = latest?.state;
+    const prev = prevStateRef.current;
+    if (prev && isActiveState(prev) && current && !isActiveState(current)) {
+      if (current === "READY") {
+        toast.push({ status: "success", title: `${target.name} deployed`, description: "Build completed successfully" });
+      } else if (current === "ERROR") {
+        toast.push({ status: "error", title: `${target.name} failed`, description: "Build encountered an error \u2014 check error details" });
+      } else if (current === "CANCELED") {
+        toast.push({ status: "warning", title: `${target.name} canceled`, description: "Deployment was canceled" });
+      }
+    }
+    prevStateRef.current = current;
+  }, [latest?.state, target.name, toast]);
   (0, import_react2.useEffect)(() => {
     setShowErrorLogs(false);
     setErrorLines([]);
@@ -336,7 +359,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   }, [isActive, latest?.created]);
   const deploy = (0, import_react2.useCallback)(async () => {
     setDeployError(null);
-    setTriggering(true);
+    (0, import_react_dom.flushSync)(() => setTriggering(true));
     try {
       await triggerDeploy(target.url);
       setTimeout(fetchDeployments, 2e3);
@@ -359,11 +382,12 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   }, [latest?.uid, token, target.teamId, fetchDeployments]);
   const copyUrl = (0, import_react2.useCallback)(() => {
     if (!latest?.url) return;
-    navigator.clipboard.writeText(`https://${latest.url}`).then(() => {
+    const fullUrl = `https://${latest.url}`;
+    navigator.clipboard.writeText(fullUrl).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
-    }).catch((err) => {
-      console.error("deploy-vercel-from-sanity: clipboard error", err);
+    }).catch(() => {
+      window.prompt("Copy deployment URL:", fullUrl);
     });
   }, [latest?.url]);
   const fetchErrorLogs = (0, import_react2.useCallback)(async () => {
@@ -377,7 +401,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
         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."]);
+      setErrorLines(lines.length > 0 ? lines : ["No stderr or stdout was captured for this build. Open the full build log in Vercel for details."]);
     } catch (err) {
       setLogError(err instanceof Error ? err.message : "Failed to load build logs");
     } finally {
@@ -392,6 +416,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const commitMsg = latest?.meta?.githubCommitMessage?.split("\n")[0];
   const sha = shortSha(latest?.meta?.githubCommitSha);
   const fullSha = latest?.meta?.githubCommitSha;
+  const commitHref = githubCommitHref(latest?.meta);
   const creator = latest?.creator?.username;
   const deployedAt = latest?.created ? timeAgo(latest.created) : null;
   const vercelProjectUrl = projectHref(latest?.inspectorUrl);
@@ -408,10 +433,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", style: { marginLeft: "-0.1em", opacity: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm0 2.122a2.25 2.25 0 1 0-1.5 0v.878A2.25 2.25 0 0 0 5.75 8.5h1.5v2.128a2.251 2.251 0 1 0 1.5 0V8.5h1.5a2.25 2.25 0 0 0 2.25-2.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 5 6.25v-.878zm3.75 7.378a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm3-8.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }) })
               ] }) }),
               token && !loadingInitial && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                triggering ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 1, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Spinner, { muted: true }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Badge, { tone: "caution", padding: 2, children: "Triggering\u2026" })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge, { state: latest?.state, showSpinner: true }),
+                triggering ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Badge, { tone: "caution", padding: 2, children: "Triggering\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge, { state: latest?.state, showSpinner: true }),
                 isActiveState(latest?.state) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   import_ui3.Button,
                   {
@@ -509,15 +531,16 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                 {
                   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,
+                  children: commitHref ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "a",
                     {
-                      size: 1,
-                      muted: true,
-                      style: { cursor: "default", fontFamily: "monospace" },
-                      children: sha
+                      href: commitHref,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      style: { color: "inherit", textDecoration: "none" },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, style: { cursor: "pointer", fontFamily: "monospace" }, children: sha })
                     }
-                  )
+                  ) : /* @__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: [
@@ -580,7 +603,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                     ] }) })
                   ] }),
                   !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)) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Box, { style: { maxHeight: 240, overflowY: "auto", fontFamily: "monospace", fontSize: 13, 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" })
@@ -605,7 +628,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
               style: { width: "100%", justifyContent: "flex-start", borderRadius: 0, cursor: "pointer" }
             }
           ),
-          showDetails && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Card, { tone: "primary", padding: 3, style: { borderRadius: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 2, children: [
+          showDetails && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Card, { tone: "primary", padding: 3, className: "dvfs-accordion-content", style: { borderRadius: 0, borderTop: "1px solid rgba(128,128,128,0.15)" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Stack, { space: 2, children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { gap: 2, align: "center", children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "Project" }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 0, muted: true, style: { fontFamily: "monospace" }, children: projectId || "\u2014" })
@@ -878,7 +901,11 @@ function DeployTargetForm({ initial, onSaved, onClose }) {
               placeholder: "team_xxxxxxxx"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Text, { size: 0, muted: true, children: "Required for team-owned Vercel projects." })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Text, { size: 0, muted: true, children: [
+            "Required for team-owned Vercel projects. Find it at Vercel \u2192 Settings \u2192 General \u2192 Team ID (starts with ",
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { children: "team_" }),
+            ")."
+          ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -901,7 +928,7 @@ function DeployTargetForm({ initial, onSaved, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "0.2.0";
+var VERSION = "1.0.0";
 
 // src/components/DeployTool.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -941,7 +968,7 @@ function DeployTool() {
     const style = document.createElement("style");
     style.id = "dvfs-styles";
     style.textContent = `
-			@media (max-width: 600px) {
+			@media (max-width: 768px) {
 				.dvfs-header { flex-wrap: wrap !important; row-gap: 8px !important; }
 				.dvfs-header-actions { width: 100% !important; flex-wrap: wrap !important; justify-content: flex-start !important; }
 				.dvfs-grid { grid-template-columns: 1fr !important; }
@@ -949,6 +976,13 @@ function DeployTool() {
 				.dvfs-deploy-col { width: 100% !important; align-self: auto !important; }
 				.dvfs-deploy-col button { border-radius: 3px !important; }
 			}
+			@keyframes dvfs-open {
+				from { opacity: 0; transform: translateY(-4px); }
+				to   { opacity: 1; transform: translateY(0); }
+			}
+			.dvfs-accordion-content {
+				animation: dvfs-open 0.15s ease-out;
+			}
 		`;
     document.head.appendChild(style);
     return () => {
@@ -1047,7 +1081,7 @@ function DeployTool() {
       ] }) }),
       targets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "dvfs-grid", style: {
         display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(540px, 1fr))",
+        gridTemplateColumns: "repeat(auto-fill, minmax(min(540px, 100%), 1fr))",
         gap: "16px",
         alignItems: "start"
       }, children: targets.map((target) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(

package/dist/index.mjs

@@ -15,12 +15,13 @@ import {
   Spinner as Spinner4,
   Button as Button5,
   Dialog as Dialog4,
-  useToast
+  useToast as useToast2
 } from "@sanity/ui";
 import { TokenIcon, TrashIcon as TrashIcon2, WarningOutlineIcon as WarningOutlineIcon2, AddIcon } from "@sanity/icons";
 
 // src/components/DeployItem.tsx
 import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2, useRef } from "react";
+import { flushSync } from "react-dom";
 import {
   Card as Card2,
   Box as Box2,
@@ -34,7 +35,8 @@ import {
   MenuButton,
   Menu,
   MenuItem,
-  Code
+  Code,
+  useToast
 } from "@sanity/ui";
 import {
   ClockIcon,
@@ -62,8 +64,8 @@ async function vercelFetch(path, token, init) {
     }
   });
   if (!res.ok) {
-    const text = await res.text().catch(() => res.statusText);
-    throw new Error(`Vercel API ${res.status}: ${text}`);
+    const hint = res.status === 401 ? " \u2014 token is invalid or expired. Reconnect your API token." : res.status === 403 ? " \u2014 token lacks the required permissions. Ensure it has Full Account scope." : res.status === 404 ? " \u2014 resource not found. Check the deploy hook URL and team ID." : res.status === 429 ? " \u2014 rate limit reached. Wait a moment and try again." : res.status >= 500 ? " \u2014 Vercel is experiencing issues. Try again shortly." : "";
+    throw new Error(`Vercel API ${res.status}${hint}`);
   }
   return res.json();
 }
@@ -171,6 +173,12 @@ function stateLabel(state) {
       return { label: "Unknown", tone: "default" };
   }
 }
+function githubCommitHref(meta) {
+  if (!meta?.githubCommitSha) return null;
+  const repo = meta.githubRepo ?? null;
+  if (!repo) return null;
+  return `https://github.com/${repo}/commit/${meta.githubCommitSha}`;
+}
 function projectHref(inspectorUrl) {
   if (!inspectorUrl) return null;
   try {
@@ -299,6 +307,7 @@ var POLL_INTERVAL_MS = 5e3;
 var LABEL_WIDTH = 64;
 function DeployItem({ target, token, onDelete, onEdit }) {
   const { projectId, hookId } = parseHookUrl(target.url);
+  const toast = useToast();
   const [deployments, setDeployments] = useState2([]);
   const [loadingInitial, setLoadingInitial] = useState2(true);
   const [triggering, setTriggering] = useState2(false);
@@ -334,6 +343,21 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   useEffect2(() => {
     if (triggering && latest && latest.state !== void 0) setTriggering(false);
   }, [triggering, latest]);
+  const prevStateRef = useRef(void 0);
+  useEffect2(() => {
+    const current = latest?.state;
+    const prev = prevStateRef.current;
+    if (prev && isActiveState(prev) && current && !isActiveState(current)) {
+      if (current === "READY") {
+        toast.push({ status: "success", title: `${target.name} deployed`, description: "Build completed successfully" });
+      } else if (current === "ERROR") {
+        toast.push({ status: "error", title: `${target.name} failed`, description: "Build encountered an error \u2014 check error details" });
+      } else if (current === "CANCELED") {
+        toast.push({ status: "warning", title: `${target.name} canceled`, description: "Deployment was canceled" });
+      }
+    }
+    prevStateRef.current = current;
+  }, [latest?.state, target.name, toast]);
   useEffect2(() => {
     setShowErrorLogs(false);
     setErrorLines([]);
@@ -357,7 +381,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   }, [isActive, latest?.created]);
   const deploy = useCallback2(async () => {
     setDeployError(null);
-    setTriggering(true);
+    flushSync(() => setTriggering(true));
     try {
       await triggerDeploy(target.url);
       setTimeout(fetchDeployments, 2e3);
@@ -380,11 +404,12 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   }, [latest?.uid, token, target.teamId, fetchDeployments]);
   const copyUrl = useCallback2(() => {
     if (!latest?.url) return;
-    navigator.clipboard.writeText(`https://${latest.url}`).then(() => {
+    const fullUrl = `https://${latest.url}`;
+    navigator.clipboard.writeText(fullUrl).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
-    }).catch((err) => {
-      console.error("deploy-vercel-from-sanity: clipboard error", err);
+    }).catch(() => {
+      window.prompt("Copy deployment URL:", fullUrl);
     });
   }, [latest?.url]);
   const fetchErrorLogs = useCallback2(async () => {
@@ -398,7 +423,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
         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."]);
+      setErrorLines(lines.length > 0 ? lines : ["No stderr or stdout was captured for this build. Open the full build log in Vercel for details."]);
     } catch (err) {
       setLogError(err instanceof Error ? err.message : "Failed to load build logs");
     } finally {
@@ -413,6 +438,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const commitMsg = latest?.meta?.githubCommitMessage?.split("\n")[0];
   const sha = shortSha(latest?.meta?.githubCommitSha);
   const fullSha = latest?.meta?.githubCommitSha;
+  const commitHref = githubCommitHref(latest?.meta);
   const creator = latest?.creator?.username;
   const deployedAt = latest?.created ? timeAgo(latest.created) : null;
   const vercelProjectUrl = projectHref(latest?.inspectorUrl);
@@ -429,10 +455,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                 /* @__PURE__ */ jsx3("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", style: { marginLeft: "-0.1em", opacity: 0.5 }, children: /* @__PURE__ */ jsx3("path", { d: "M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm0 2.122a2.25 2.25 0 1 0-1.5 0v.878A2.25 2.25 0 0 0 5.75 8.5h1.5v2.128a2.251 2.251 0 1 0 1.5 0V8.5h1.5a2.25 2.25 0 0 0 2.25-2.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 5 6.25v-.878zm3.75 7.378a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm3-8.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }) })
               ] }) }),
               token && !loadingInitial && /* @__PURE__ */ jsxs3(Fragment, { children: [
-                triggering ? /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
-                  /* @__PURE__ */ jsx3(Spinner3, { muted: true }),
-                  /* @__PURE__ */ jsx3(Badge3, { tone: "caution", padding: 2, children: "Triggering\u2026" })
-                ] }) : /* @__PURE__ */ jsx3(StatusBadge, { state: latest?.state, showSpinner: true }),
+                triggering ? /* @__PURE__ */ jsx3(Badge3, { tone: "caution", padding: 2, children: "Triggering\u2026" }) : /* @__PURE__ */ jsx3(StatusBadge, { state: latest?.state, showSpinner: true }),
                 isActiveState(latest?.state) && /* @__PURE__ */ jsx3(
                   Button2,
                   {
@@ -530,15 +553,16 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                 {
                   content: /* @__PURE__ */ jsx3(Box2, { padding: 2, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: commitMsg ?? sha }) }),
                   portal: true,
-                  children: /* @__PURE__ */ jsx3(
-                    Text2,
+                  children: commitHref ? /* @__PURE__ */ jsx3(
+                    "a",
                     {
-                      size: 1,
-                      muted: true,
-                      style: { cursor: "default", fontFamily: "monospace" },
-                      children: sha
+                      href: commitHref,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      style: { color: "inherit", textDecoration: "none" },
+                      children: /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, style: { cursor: "pointer", fontFamily: "monospace" }, children: sha })
                     }
-                  )
+                  ) : /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, style: { cursor: "default", fontFamily: "monospace" }, children: sha })
                 }
               ),
               creator && /* @__PURE__ */ jsxs3(Text2, { size: 1, muted: true, children: [
@@ -601,7 +625,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                     ] }) })
                   ] }),
                   !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)) }),
+                    /* @__PURE__ */ jsx3(Box2, { style: { maxHeight: 240, overflowY: "auto", fontFamily: "monospace", fontSize: 13, 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" })
@@ -626,7 +650,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
               style: { width: "100%", justifyContent: "flex-start", borderRadius: 0, cursor: "pointer" }
             }
           ),
-          showDetails && /* @__PURE__ */ jsx3(Card2, { tone: "primary", padding: 3, style: { borderRadius: 0 }, children: /* @__PURE__ */ jsxs3(Stack2, { space: 2, children: [
+          showDetails && /* @__PURE__ */ jsx3(Card2, { tone: "primary", padding: 3, className: "dvfs-accordion-content", style: { borderRadius: 0, borderTop: "1px solid rgba(128,128,128,0.15)" }, children: /* @__PURE__ */ jsxs3(Stack2, { space: 2, children: [
             /* @__PURE__ */ jsxs3(Flex3, { gap: 2, align: "center", children: [
               /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "Project" }),
               /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, style: { fontFamily: "monospace" }, children: projectId || "\u2014" })
@@ -910,7 +934,11 @@ function DeployTargetForm({ initial, onSaved, onClose }) {
               placeholder: "team_xxxxxxxx"
             }
           ),
-          /* @__PURE__ */ jsx5(Text4, { size: 0, muted: true, children: "Required for team-owned Vercel projects." })
+          /* @__PURE__ */ jsxs5(Text4, { size: 0, muted: true, children: [
+            "Required for team-owned Vercel projects. Find it at Vercel \u2192 Settings \u2192 General \u2192 Team ID (starts with ",
+            /* @__PURE__ */ jsx5("code", { children: "team_" }),
+            ")."
+          ] })
         ] }),
         /* @__PURE__ */ jsxs5(Flex5, { align: "center", gap: 3, children: [
           /* @__PURE__ */ jsx5(
@@ -933,7 +961,7 @@ function DeployTargetForm({ initial, onSaved, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "0.2.0";
+var VERSION = "1.0.0";
 
 // src/components/DeployTool.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -941,7 +969,7 @@ var TOKEN_QUERY = `*[_id == "config.vercelDeploy"][0].accessToken`;
 var TARGETS_QUERY = `*[_type == "vercel_deploy"] | order(_createdAt asc)`;
 function DeployTool() {
   const client = useClient3({ apiVersion: "2025-01-01" });
-  const toast = useToast();
+  const toast = useToast2();
   const [token, setToken] = useState5(null);
   const [targets, setTargets] = useState5([]);
   const [loading, setLoading] = useState5(true);
@@ -973,7 +1001,7 @@ function DeployTool() {
     const style = document.createElement("style");
     style.id = "dvfs-styles";
     style.textContent = `
-			@media (max-width: 600px) {
+			@media (max-width: 768px) {
 				.dvfs-header { flex-wrap: wrap !important; row-gap: 8px !important; }
 				.dvfs-header-actions { width: 100% !important; flex-wrap: wrap !important; justify-content: flex-start !important; }
 				.dvfs-grid { grid-template-columns: 1fr !important; }
@@ -981,6 +1009,13 @@ function DeployTool() {
 				.dvfs-deploy-col { width: 100% !important; align-self: auto !important; }
 				.dvfs-deploy-col button { border-radius: 3px !important; }
 			}
+			@keyframes dvfs-open {
+				from { opacity: 0; transform: translateY(-4px); }
+				to   { opacity: 1; transform: translateY(0); }
+			}
+			.dvfs-accordion-content {
+				animation: dvfs-open 0.15s ease-out;
+			}
 		`;
     document.head.appendChild(style);
     return () => {
@@ -1079,7 +1114,7 @@ function DeployTool() {
       ] }) }),
       targets.length > 0 && /* @__PURE__ */ jsx6("div", { className: "dvfs-grid", style: {
         display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(540px, 1fr))",
+        gridTemplateColumns: "repeat(auto-fill, minmax(min(540px, 100%), 1fr))",
         gap: "16px",
         alignItems: "start"
       }, children: targets.map((target) => /* @__PURE__ */ jsx6(

package/package.json

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

package/src/components/DeployItem.tsx

@@ -1,15 +1,16 @@
 // Per-deploy-target card — shows status, build timer, history, cancel, deploy, copy URL, and error logs
 import { useState, useEffect, useCallback, useRef } from 'react'
+import { flushSync } from 'react-dom'
 import {
 	Card, Box, Stack, Flex, Text, Button, Tooltip, Badge, Spinner,
-	MenuButton, Menu, MenuItem, Code,
+	MenuButton, Menu, MenuItem, Code, useToast,
 } from '@sanity/ui'
 import {
 	ClockIcon, TrashIcon, EllipsisVerticalIcon, LaunchIcon,
 	CopyIcon, CheckmarkIcon, WarningOutlineIcon, ChevronDownIcon, ChevronUpIcon, EditIcon, SchemaIcon
 } from '@sanity/icons'
 import { listDeployments, cancelDeployment, triggerDeploy, getDeploymentEvents } from '../lib/api'
-import { parseHookUrl, isActiveState, formatDuration, timeAgo, shortSha, safeHref, projectHref } from '../lib/helpers'
+import { parseHookUrl, isActiveState, formatDuration, timeAgo, shortSha, safeHref, projectHref, githubCommitHref } from '../lib/helpers'
 import { StatusBadge } from './StatusBadge'
 import { DeployHistory } from './DeployHistory'
 import type { DeployTarget, VercelDeployment } from '../types'
@@ -26,6 +27,7 @@ interface DeployItemProps {
 
 export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps) {
 	const { projectId, hookId } = parseHookUrl(target.url)
+	const toast = useToast()
 
 	const [deployments, setDeployments]      = useState<VercelDeployment[]>([])
 	const [loadingInitial, setLoadingInitial] = useState(true)
@@ -69,6 +71,23 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 		if (triggering && latest && latest.state !== undefined) setTriggering(false)
 	}, [triggering, latest])
 
+	// ── Deploy-complete toast ─────────────────────────────────────────────────
+	const prevStateRef = useRef<string | undefined>(undefined)
+	useEffect(() => {
+		const current = latest?.state
+		const prev = prevStateRef.current
+		if (prev && isActiveState(prev as never) && current && !isActiveState(current as never)) {
+			if (current === 'READY') {
+				toast.push({ status: 'success', title: `${target.name} deployed`, description: 'Build completed successfully' })
+			} else if (current === 'ERROR') {
+				toast.push({ status: 'error', title: `${target.name} failed`, description: 'Build encountered an error — check error details' })
+			} else if (current === 'CANCELED') {
+				toast.push({ status: 'warning', title: `${target.name} canceled`, description: 'Deployment was canceled' })
+			}
+		}
+		prevStateRef.current = current
+	}, [latest?.state, target.name, toast])
+
 	useEffect(() => {
 		setShowErrorLogs(false)
 		setErrorLines([])
@@ -94,7 +113,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	// ── Actions ───────────────────────────────────────────────────────────────
 	const deploy = useCallback(async () => {
 		setDeployError(null)
-		setTriggering(true)
+		flushSync(() => setTriggering(true))
 		try {
 			await triggerDeploy(target.url)
 			setTimeout(fetchDeployments, 2000)
@@ -119,11 +138,13 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 
 	const copyUrl = useCallback(() => {
 		if (!latest?.url) return
-		navigator.clipboard.writeText(`https://${latest.url}`).then(() => {
+		const fullUrl = `https://${latest.url}`
+		navigator.clipboard.writeText(fullUrl).then(() => {
 			setCopied(true)
 			setTimeout(() => setCopied(false), 2000)
-		}).catch(err => {
-			console.error('deploy-vercel-from-sanity: clipboard error', err)
+		}).catch(() => {
+			// Clipboard API unavailable — surface the URL for manual copy
+			window.prompt('Copy deployment URL:', fullUrl)
 		})
 	}, [latest?.url])
 
@@ -143,7 +164,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 				.filter(Boolean)
 				.reverse()
 				.slice(-30)
-			setErrorLines(lines.length > 0 ? lines : ['No log output captured.'])
+			setErrorLines(lines.length > 0 ? lines : ['No stderr or stdout was captured for this build. Open the full build log in Vercel for details.'])
 		} catch (err) {
 			setLogError(err instanceof Error ? err.message : 'Failed to load build logs')
 		} finally {
@@ -161,6 +182,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	const commitMsg        = latest?.meta?.githubCommitMessage?.split('\n')[0]
 	const sha              = shortSha(latest?.meta?.githubCommitSha)
 	const fullSha          = latest?.meta?.githubCommitSha
+	const commitHref       = githubCommitHref(latest?.meta)
 	const creator          = latest?.creator?.username
 	const deployedAt       = latest?.created ? timeAgo(latest.created) : null
 	const vercelProjectUrl = projectHref(latest?.inspectorUrl)
@@ -193,10 +215,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 									{token && !loadingInitial && (
 										<>
 											{triggering ? (
-												<Flex align="center" gap={1}>
-													<Spinner muted />
-													<Badge tone="caution" padding={2}>Triggering…</Badge>
-												</Flex>
+												<Badge tone="caution" padding={2}>Triggering…</Badge>
 											) : (
 												<StatusBadge state={latest?.state} showSpinner />
 											)}
@@ -304,7 +323,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 											</>
 										)}
 
-										{/* Commit SHA — tooltip shows full message */}
+										{/* Commit SHA — links to GitHub if repo info available, tooltip shows full message */}
 										{sha && (
 											<Tooltip
 												content={
@@ -314,13 +333,22 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 												}
 												portal
 											>
-												<Text
-													size={1}
-													muted
-													style={{ cursor: 'default', fontFamily: 'monospace' }}
-												>
-													{sha}
-												</Text>
+												{commitHref ? (
+													<a
+														href={commitHref}
+														target="_blank"
+														rel="noreferrer"
+														style={{ color: 'inherit', textDecoration: 'none' }}
+													>
+														<Text size={1} muted style={{ cursor: 'pointer', fontFamily: 'monospace' }}>
+															{sha}
+														</Text>
+													</a>
+												) : (
+													<Text size={1} muted style={{ cursor: 'default', fontFamily: 'monospace' }}>
+														{sha}
+													</Text>
+												)}
 											</Tooltip>
 										)}
 
@@ -399,7 +427,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 														)}
 														{!loadingLogs && !logError && errorLines.length > 0 && (
 															<Stack space={2}>
-																<Box style={{ maxHeight: 240, overflowY: 'auto', fontFamily: 'monospace', fontSize: 11, lineHeight: 1.6 }}>
+																<Box style={{ maxHeight: 240, overflowY: 'auto', fontFamily: 'monospace', fontSize: 13, lineHeight: 1.6 }}>
 																	{errorLines.map((line, i) => (
 																		<Code key={i} size={1} style={{ display: 'block', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
 																			{line}
@@ -445,7 +473,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 								style={{ width: '100%', justifyContent: 'flex-start', borderRadius: 0, cursor: 'pointer' }}
 							/>
 							{showDetails && (
-								<Card tone="primary" padding={3} style={{ borderRadius: 0 }}>
+								<Card tone="primary" padding={3} className="dvfs-accordion-content" style={{ borderRadius: 0, borderTop: '1px solid rgba(128,128,128,0.15)' }}>
 									<Stack space={2}>
 										<Flex gap={2} align="center">
 											<Text size={0} muted weight="semibold" style={{ minWidth: LABEL_WIDTH }}>Project</Text>

package/src/components/DeployTargetForm.tsx

@@ -114,7 +114,9 @@ export function DeployTargetForm({ initial, onSaved, onClose }: DeployTargetForm
 							onChange={e => setTeamId((e.target as HTMLInputElement).value)}
 							placeholder="team_xxxxxxxx"
 						/>
-						<Text size={0} muted>Required for team-owned Vercel projects.</Text>
+						<Text size={0} muted>
+							Required for team-owned Vercel projects. Find it at Vercel → Settings → General → Team ID (starts with <code>team_</code>).
+						</Text>
 					</Stack>
 
 					{/* Disable delete */}

package/src/components/DeployTool.tsx

@@ -52,7 +52,7 @@ export function DeployTool() {
 		const style = document.createElement('style')
 		style.id = 'dvfs-styles'
 		style.textContent = `
-			@media (max-width: 600px) {
+			@media (max-width: 768px) {
 				.dvfs-header { flex-wrap: wrap !important; row-gap: 8px !important; }
 				.dvfs-header-actions { width: 100% !important; flex-wrap: wrap !important; justify-content: flex-start !important; }
 				.dvfs-grid { grid-template-columns: 1fr !important; }
@@ -60,6 +60,13 @@ export function DeployTool() {
 				.dvfs-deploy-col { width: 100% !important; align-self: auto !important; }
 				.dvfs-deploy-col button { border-radius: 3px !important; }
 			}
+			@keyframes dvfs-open {
+				from { opacity: 0; transform: translateY(-4px); }
+				to   { opacity: 1; transform: translateY(0); }
+			}
+			.dvfs-accordion-content {
+				animation: dvfs-open 0.15s ease-out;
+			}
 		`
 		document.head.appendChild(style)
 		return () => { document.getElementById('dvfs-styles')?.remove() }
@@ -181,7 +188,7 @@ export function DeployTool() {
 					{targets.length > 0 && (
 						<div className="dvfs-grid" style={{
 							display: 'grid',
-							gridTemplateColumns: 'repeat(auto-fill, minmax(540px, 1fr))',
+							gridTemplateColumns: 'repeat(auto-fill, minmax(min(540px, 100%), 1fr))',
 							gap: '16px',
 							alignItems: 'start',
 						}}>

package/src/lib/api.ts

@@ -16,8 +16,14 @@ async function vercelFetch<T>(path: string, token: string, init?: RequestInit):
 		},
 	})
 	if (!res.ok) {
-		const text = await res.text().catch(() => res.statusText)
-		throw new Error(`Vercel API ${res.status}: ${text}`)
+		const hint =
+			res.status === 401 ? ' — token is invalid or expired. Reconnect your API token.' :
+			res.status === 403 ? ' — token lacks the required permissions. Ensure it has Full Account scope.' :
+			res.status === 404 ? ' — resource not found. Check the deploy hook URL and team ID.' :
+			res.status === 429 ? ' — rate limit reached. Wait a moment and try again.' :
+			res.status >= 500  ? ' — Vercel is experiencing issues. Try again shortly.' :
+			''
+		throw new Error(`Vercel API ${res.status}${hint}`)
 	}
 	return res.json() as Promise<T>
 }

package/src/lib/helpers.ts

@@ -1,5 +1,5 @@
 // URL parsing and time formatting utilities
-import type { VercelDeployState } from '../types'
+import type { VercelDeployment, VercelDeployState } from '../types'
 
 /**
  * Extracts projectId and hookId from a Vercel deploy hook URL.
@@ -85,6 +85,17 @@ export function stateLabel(state: VercelDeployState | undefined): {
 	}
 }
 
+/**
+ * Constructs a GitHub commit URL from deployment meta fields.
+ * Returns null if the required repo or SHA info is not present.
+ */
+export function githubCommitHref(meta: VercelDeployment['meta']): string | null {
+	if (!meta?.githubCommitSha) return null
+	const repo = meta.githubRepo ?? null
+	if (!repo) return null
+	return `https://github.com/${repo}/commit/${meta.githubCommitSha}`
+}
+
 /**
  * Extracts the Vercel project dashboard URL from a deployment's inspectorUrl.
  * inspectorUrl format: https://vercel.com/{team}/{project}/{deploymentId}

package/src/types.ts

@@ -42,6 +42,10 @@ export interface VercelDeployment {
 		githubCommitRef?: string
 		githubCommitSha?: string
 		githubCommitAuthorName?: string
+		/** GitHub repo in "org/repo" format — used to construct commit links */
+		githubRepo?: string
+		/** GitHub org slug — fallback when githubRepo is absent */
+		githubCommitOrg?: string
 	}
 }
 

package/src/version.ts

@@ -1,2 +1,2 @@
 // Package version — keep in sync with package.json
-export const VERSION = '0.2.0'
+export const VERSION = '1.0.0'