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

package/dist/index.d.mts

@@ -19,8 +19,10 @@ interface VercelDeployment {
     /** Preview hostname, e.g. my-project-abc123.vercel.app */
     url: string;
     state: VercelDeployState;
-    /** Unix ms timestamp */
+    /** Unix ms timestamp — when the deployment was created */
     created: number;
+    /** Unix ms timestamp — when the deployment became ready */
+    ready?: number;
     /** Link to the Vercel dashboard page for this deployment */
     inspectorUrl?: string;
     creator?: {

package/dist/index.d.ts

@@ -19,8 +19,10 @@ interface VercelDeployment {
     /** Preview hostname, e.g. my-project-abc123.vercel.app */
     url: string;
     state: VercelDeployState;
-    /** Unix ms timestamp */
+    /** Unix ms timestamp — when the deployment was created */
     created: number;
+    /** Unix ms timestamp — when the deployment became ready */
+    ready?: number;
     /** Link to the Vercel dashboard page for this deployment */
     inspectorUrl?: string;
     creator?: {

package/dist/index.js

@@ -35,7 +35,6 @@ 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");
 
@@ -357,16 +356,18 @@ function DeployItem({ target, token, onDelete, onEdit }) {
       if (timerRef.current) clearInterval(timerRef.current);
     };
   }, [isActive, latest?.created]);
-  const deploy = (0, import_react2.useCallback)(async () => {
+  const deploy = (0, import_react2.useCallback)(() => {
     setDeployError(null);
-    (0, import_react_dom.flushSync)(() => setTriggering(true));
-    try {
-      await triggerDeploy(target.url);
-      setTimeout(fetchDeployments, 2e3);
-    } catch (err) {
-      setTriggering(false);
-      setDeployError(err instanceof Error ? err.message : "Deploy failed");
-    }
+    setTriggering(true);
+    void (async () => {
+      try {
+        await triggerDeploy(target.url);
+        setTimeout(fetchDeployments, 2e3);
+      } catch (err) {
+        setTriggering(false);
+        setDeployError(err instanceof Error ? err.message : "Deploy failed");
+      }
+    })();
   }, [target.url, fetchDeployments]);
   const cancel = (0, import_react2.useCallback)(async () => {
     if (!latest?.uid) return;
@@ -433,7 +434,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.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 }),
                 isActiveState(latest?.state) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   import_ui3.Button,
                   {
@@ -547,6 +548,11 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                 "by ",
                 creator
               ] }),
+              latest?.state === "READY" && latest.ready && latest.created && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Text, { size: 1, muted: true, children: [
+                "Took ",
+                formatDuration(Math.floor((latest.ready - latest.created) / 1e3)),
+                " to build"
+              ] }),
               latest?.url && latest.state === "READY" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 import_ui3.Tooltip,
                 {

package/dist/index.mjs

@@ -21,7 +21,6 @@ import { TokenIcon, TrashIcon as TrashIcon2, WarningOutlineIcon as WarningOutlin
 
 // 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,
@@ -379,16 +378,18 @@ function DeployItem({ target, token, onDelete, onEdit }) {
       if (timerRef.current) clearInterval(timerRef.current);
     };
   }, [isActive, latest?.created]);
-  const deploy = useCallback2(async () => {
+  const deploy = useCallback2(() => {
     setDeployError(null);
-    flushSync(() => setTriggering(true));
-    try {
-      await triggerDeploy(target.url);
-      setTimeout(fetchDeployments, 2e3);
-    } catch (err) {
-      setTriggering(false);
-      setDeployError(err instanceof Error ? err.message : "Deploy failed");
-    }
+    setTriggering(true);
+    void (async () => {
+      try {
+        await triggerDeploy(target.url);
+        setTimeout(fetchDeployments, 2e3);
+      } catch (err) {
+        setTriggering(false);
+        setDeployError(err instanceof Error ? err.message : "Deploy failed");
+      }
+    })();
   }, [target.url, fetchDeployments]);
   const cancel = useCallback2(async () => {
     if (!latest?.uid) return;
@@ -455,7 +456,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__ */ 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 }),
                 isActiveState(latest?.state) && /* @__PURE__ */ jsx3(
                   Button2,
                   {
@@ -569,6 +570,11 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                 "by ",
                 creator
               ] }),
+              latest?.state === "READY" && latest.ready && latest.created && /* @__PURE__ */ jsxs3(Text2, { size: 1, muted: true, children: [
+                "Took ",
+                formatDuration(Math.floor((latest.ready - latest.created) / 1e3)),
+                " to build"
+              ] }),
               latest?.url && latest.state === "READY" && /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3(
                 Tooltip,
                 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liiift-studio/deploy-vercel-from-sanity",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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,6 +1,5 @@
 // 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, useToast,
@@ -111,16 +110,18 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	}, [isActive, latest?.created])
 
 	// ── Actions ───────────────────────────────────────────────────────────────
-	const deploy = useCallback(async () => {
+	const deploy = useCallback(() => {
 		setDeployError(null)
-		flushSync(() => setTriggering(true))
-		try {
-			await triggerDeploy(target.url)
-			setTimeout(fetchDeployments, 2000)
-		} catch (err) {
-			setTriggering(false)
-			setDeployError(err instanceof Error ? err.message : 'Deploy failed')
-		}
+		setTriggering(true)
+		void (async () => {
+			try {
+				await triggerDeploy(target.url)
+				setTimeout(fetchDeployments, 2000)
+			} catch (err) {
+				setTriggering(false)
+				setDeployError(err instanceof Error ? err.message : 'Deploy failed')
+			}
+		})()
 	}, [target.url, fetchDeployments])
 
 	const cancel = useCallback(async () => {
@@ -217,7 +218,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 											{triggering ? (
 												<Badge tone="caution" padding={2}>Triggering…</Badge>
 											) : (
-												<StatusBadge state={latest?.state} showSpinner />
+												<StatusBadge state={latest?.state} />
 											)}
 											{isActiveState(latest?.state) && (
 												<Button
@@ -355,6 +356,11 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 										{/* Creator */}
 										{creator && <Text size={1} muted>by {creator}</Text>}
 
+										{/* Build duration — only shown when READY and ready timestamp is available */}
+										{latest?.state === 'READY' && latest.ready && latest.created && (
+											<Text size={1} muted>Took {formatDuration(Math.floor((latest.ready - latest.created) / 1000))} to build</Text>
+										)}
+
 										{/* Visit link + copy URL */}
 										{latest?.url && latest.state === 'READY' && (
 											<>

package/src/types.ts

@@ -28,8 +28,10 @@ export interface VercelDeployment {
 	/** Preview hostname, e.g. my-project-abc123.vercel.app */
 	url: string
 	state: VercelDeployState
-	/** Unix ms timestamp */
+	/** Unix ms timestamp — when the deployment was created */
 	created: number
+	/** Unix ms timestamp — when the deployment became ready */
+	ready?: number
 	/** Link to the Vercel dashboard page for this deployment */
 	inspectorUrl?: string
 	creator?: {