@liiift-studio/deploy-vercel-from-sanity 1.0.8 → 1.0.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Liiift Studio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -6,7 +6,7 @@
 [![Sanity v3/v4/v5](https://img.shields.io/badge/sanity-v3%20%7C%20v4%20%7C%20v5-f03e2f)](https://www.sanity.io)
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue)](./LICENSE)
 
-![Deploy with Vercel — Production and Preview targets with live status](./docs/screenshot.png)
+![The Deploy tool inside Sanity Studio — Production and Preview targets each showing a live status badge, branch, commit SHA, deploy author, and a one-click Deploy button](https://raw.githubusercontent.com/Liiift-Studio/Deploy-Vercel-from-Sanity/main/docs/screenshot.png?v=1)
 
 ---
 
@@ -119,6 +119,28 @@ tools: (prev, { currentUser }) => {
 
 ## How it works
 
+```mermaid
+flowchart LR
+    subgraph studio["Sanity Studio"]
+        tool["Deploy tool"]
+    end
+    subgraph dataset["Sanity dataset"]
+        targets["vercel_deploy docs<br/>(deploy targets)"]
+        cfg["config.vercelDeploy doc<br/>(API token)"]
+    end
+    subgraph vercel["Vercel"]
+        hook["Deploy hook<br/>POST /v1/integrations/deploy/…"]
+        api["REST API<br/>/v6/deployments · /v2/.../events"]
+    end
+
+    tool -- "reads targets + token" --> targets
+    tool -- "reads token" --> cfg
+    tool -- "1 - click Deploy" --> hook
+    hook -- "queues a build" --> api
+    api -- "poll every 5s while active" --> tool
+    tool -. "toast on Ready / Error / Canceled" .-> tool
+```
+
 1. Deploy targets are stored as `vercel_deploy` documents in your Sanity dataset.
 2. The plugin fetches the last 10 deployments for each target from the Vercel API, filtered to those triggered by that hook.
 3. While a deployment is active (Queued / Initializing / Building), it polls every 5 seconds.
@@ -164,7 +186,7 @@ If "No stderr or stdout was captured" appears, the build may have failed before
 
 ## Security
 
-**API token storage** — The Vercel API token is stored in a `config.vercelDeploy` Sanity document, readable by all authenticated studio users. Audit who has access to your Sanity project at sanity.io → Project → Members. If your studio includes untrusted editors, consider a server-side proxy that holds the token and exposes only a scoped deploy endpoint.
+**API token storage** — The Vercel API token is stored in a `config.vercelDeploy` Sanity document, readable by all authenticated studio users. Note that a **Full Account** scoped token can read and write your entire Vercel account, so anyone with studio access can read a credential that grants broad Vercel access — treat the token accordingly. Audit who has access to your Sanity project at sanity.io → Project → Members. If your studio includes untrusted editors, consider a server-side proxy that holds the token and exposes only a scoped deploy endpoint.
 
 **Deploy hook URL validation** — `triggerDeploy` validates that the hook URL matches `api.vercel.com/v1/integrations/deploy/` before making the request, preventing SSRF from a tampered document.
 
@@ -180,12 +202,16 @@ If "No stderr or stdout was captured" appears, the build may have failed before
 - React 18 or 19
 - A Vercel account with at least one project and a deploy hook configured
 
+Zero runtime dependencies — `react` and `sanity` are peer dependencies provided by your Studio; the plugin ships nothing else.
+
 ---
 
 ## Contributing
 
 Issues and pull requests welcome at [github.com/Liiift-Studio/Deploy-Vercel-from-Sanity](https://github.com/Liiift-Studio/Deploy-Vercel-from-Sanity).
 
+Local development, `npm link`, and publishing steps are documented in [SETUP.md](./SETUP.md).
+
 ---
 
 ## License

package/dist/index.d.mts

@@ -66,7 +66,7 @@ declare const vercelDeploySchema: {
  *
  * @example
  * // sanity.config.ts
- * import { vercelDeploy } from 'deploy-vercel-from-sanity'
+ * import { vercelDeploy } from '@liiift-studio/deploy-vercel-from-sanity'
  *
  * export default defineConfig({
  *   plugins: [

package/dist/index.d.ts

@@ -66,7 +66,7 @@ declare const vercelDeploySchema: {
  *
  * @example
  * // sanity.config.ts
- * import { vercelDeploy } from 'deploy-vercel-from-sanity'
+ * import { vercelDeploy } from '@liiift-studio/deploy-vercel-from-sanity'
  *
  * export default defineConfig({
  *   plugins: [

package/dist/index.js

@@ -283,12 +283,13 @@ function DeployHistory({ target, token, onClose }) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var POLL_INTERVAL_MS = 5e3;
 var LABEL_WIDTH = 64;
+var PENDING_TIMEOUT_MS = 6e4;
 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);
+  const [pendingSince, setPendingSince] = (0, import_react2.useState)(null);
   const [canceling, setCanceling] = (0, import_react2.useState)(false);
   const [deployError, setDeployError] = (0, import_react2.useState)(null);
   const [showHistory, setShowHistory] = (0, import_react2.useState)(false);
@@ -299,8 +300,10 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const [errorLines, setErrorLines] = (0, import_react2.useState)([]);
   const [loadingLogs, setLoadingLogs] = (0, import_react2.useState)(false);
   const [logError, setLogError] = (0, import_react2.useState)(null);
+  const triggeredFromUidRef = (0, import_react2.useRef)(void 0);
   const latest = deployments[0];
-  const isActive = triggering || isActiveState(latest?.state);
+  const isPending = pendingSince !== null;
+  const isActive = isPending || isActiveState(latest?.state);
   const fetchDeployments = (0, import_react2.useCallback)(async () => {
     if (!projectId || !hookId || !token) return;
     try {
@@ -319,8 +322,14 @@ function DeployItem({ target, token, onDelete, onEdit }) {
     return () => clearInterval(id);
   }, [isActive, fetchDeployments]);
   (0, import_react2.useEffect)(() => {
-    if (triggering && latest && latest.state !== void 0) setTriggering(false);
-  }, [triggering, latest]);
+    if (!isPending) return;
+    if (latest?.uid && latest.uid !== triggeredFromUidRef.current) setPendingSince(null);
+  }, [isPending, latest?.uid]);
+  (0, import_react2.useEffect)(() => {
+    if (!isPending) return;
+    const id = setTimeout(() => setPendingSince(null), PENDING_TIMEOUT_MS);
+    return () => clearTimeout(id);
+  }, [isPending]);
   const prevStateRef = (0, import_react2.useRef)(void 0);
   (0, import_react2.useEffect)(() => {
     const current = latest?.state;
@@ -344,7 +353,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const timerRef = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
     if (isActive) {
-      const start = latest?.created ?? Date.now();
+      const start = pendingSince ?? latest?.created ?? Date.now();
       setElapsed(Math.floor((Date.now() - start) / 1e3));
       timerRef.current = setInterval(() => {
         setElapsed(Math.floor((Date.now() - start) / 1e3));
@@ -356,22 +365,23 @@ function DeployItem({ target, token, onDelete, onEdit }) {
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [isActive, latest?.created]);
+  }, [isActive, pendingSince, latest?.created]);
   const deploy = (0, import_react2.useCallback)(() => {
     (0, import_react_dom.flushSync)(() => {
       setDeployError(null);
-      setTriggering(true);
+      triggeredFromUidRef.current = latest?.uid;
+      setPendingSince(Date.now());
     });
     void (async () => {
       try {
         await triggerDeploy(target.url);
         setTimeout(fetchDeployments, 2e3);
       } catch (err) {
-        setTriggering(false);
+        setPendingSince(null);
         setDeployError(err instanceof Error ? err.message : "Deploy failed");
       }
     })();
-  }, [target.url, fetchDeployments]);
+  }, [target.url, fetchDeployments, latest?.uid]);
   const cancel = (0, import_react2.useCallback)(async () => {
     if (!latest?.uid) return;
     setCanceling(true);
@@ -437,7 +447,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 }),
+                isPending ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge, { state: "QUEUED" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge, { state: latest?.state }),
                 isActiveState(latest?.state) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   import_ui3.Button,
                   {
@@ -450,10 +460,13 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                     style: { cursor: "pointer" }
                   }
                 ),
-                isActive && elapsed > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 1, children: [
+                isPending ? (
+                  /* Optimistic — dimmed spinner only; no elapsed time until a real build exists */
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Spinner, { muted: true, style: { marginLeft: 4, opacity: 0.5 } })
+                ) : isActive ? /* @__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, style: { marginLeft: 4 } }),
                   /* @__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
+                ] }) : deployedAt ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: deployedAt }) : null
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -696,6 +709,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
             {
               text: "Deploy",
               tone: "primary",
+              loading: isPending,
               disabled: isActive,
               onClick: deploy,
               style: {
@@ -936,7 +950,7 @@ function DeployTargetForm({ initial, onSaved, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "1.0.8";
+var VERSION = "1.0.10";
 
 // src/components/DeployTool.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -305,12 +305,13 @@ function DeployHistory({ target, token, onClose }) {
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 5e3;
 var LABEL_WIDTH = 64;
+var PENDING_TIMEOUT_MS = 6e4;
 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);
+  const [pendingSince, setPendingSince] = useState2(null);
   const [canceling, setCanceling] = useState2(false);
   const [deployError, setDeployError] = useState2(null);
   const [showHistory, setShowHistory] = useState2(false);
@@ -321,8 +322,10 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const [errorLines, setErrorLines] = useState2([]);
   const [loadingLogs, setLoadingLogs] = useState2(false);
   const [logError, setLogError] = useState2(null);
+  const triggeredFromUidRef = useRef(void 0);
   const latest = deployments[0];
-  const isActive = triggering || isActiveState(latest?.state);
+  const isPending = pendingSince !== null;
+  const isActive = isPending || isActiveState(latest?.state);
   const fetchDeployments = useCallback2(async () => {
     if (!projectId || !hookId || !token) return;
     try {
@@ -341,8 +344,14 @@ function DeployItem({ target, token, onDelete, onEdit }) {
     return () => clearInterval(id);
   }, [isActive, fetchDeployments]);
   useEffect2(() => {
-    if (triggering && latest && latest.state !== void 0) setTriggering(false);
-  }, [triggering, latest]);
+    if (!isPending) return;
+    if (latest?.uid && latest.uid !== triggeredFromUidRef.current) setPendingSince(null);
+  }, [isPending, latest?.uid]);
+  useEffect2(() => {
+    if (!isPending) return;
+    const id = setTimeout(() => setPendingSince(null), PENDING_TIMEOUT_MS);
+    return () => clearTimeout(id);
+  }, [isPending]);
   const prevStateRef = useRef(void 0);
   useEffect2(() => {
     const current = latest?.state;
@@ -366,7 +375,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const timerRef = useRef(null);
   useEffect2(() => {
     if (isActive) {
-      const start = latest?.created ?? Date.now();
+      const start = pendingSince ?? latest?.created ?? Date.now();
       setElapsed(Math.floor((Date.now() - start) / 1e3));
       timerRef.current = setInterval(() => {
         setElapsed(Math.floor((Date.now() - start) / 1e3));
@@ -378,22 +387,23 @@ function DeployItem({ target, token, onDelete, onEdit }) {
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [isActive, latest?.created]);
+  }, [isActive, pendingSince, latest?.created]);
   const deploy = useCallback2(() => {
     flushSync(() => {
       setDeployError(null);
-      setTriggering(true);
+      triggeredFromUidRef.current = latest?.uid;
+      setPendingSince(Date.now());
     });
     void (async () => {
       try {
         await triggerDeploy(target.url);
         setTimeout(fetchDeployments, 2e3);
       } catch (err) {
-        setTriggering(false);
+        setPendingSince(null);
         setDeployError(err instanceof Error ? err.message : "Deploy failed");
       }
     })();
-  }, [target.url, fetchDeployments]);
+  }, [target.url, fetchDeployments, latest?.uid]);
   const cancel = useCallback2(async () => {
     if (!latest?.uid) return;
     setCanceling(true);
@@ -459,7 +469,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 }),
+                isPending ? /* @__PURE__ */ jsx3(StatusBadge, { state: "QUEUED" }) : /* @__PURE__ */ jsx3(StatusBadge, { state: latest?.state }),
                 isActiveState(latest?.state) && /* @__PURE__ */ jsx3(
                   Button2,
                   {
@@ -472,10 +482,13 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                     style: { cursor: "pointer" }
                   }
                 ),
-                isActive && elapsed > 0 ? /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
+                isPending ? (
+                  /* Optimistic — dimmed spinner only; no elapsed time until a real build exists */
+                  /* @__PURE__ */ jsx3(Spinner3, { muted: true, style: { marginLeft: 4, opacity: 0.5 } })
+                ) : isActive ? /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
                   /* @__PURE__ */ jsx3(Spinner3, { muted: true, style: { marginLeft: 4 } }),
                   /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: formatDuration(elapsed) })
-                ] }) : !isActive && deployedAt ? /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: deployedAt }) : null
+                ] }) : deployedAt ? /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: deployedAt }) : null
               ] })
             ] }),
             /* @__PURE__ */ jsx3(
@@ -718,6 +731,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
             {
               text: "Deploy",
               tone: "primary",
+              loading: isPending,
               disabled: isActive,
               onClick: deploy,
               style: {
@@ -969,7 +983,7 @@ function DeployTargetForm({ initial, onSaved, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "1.0.8";
+var VERSION = "1.0.10";
 
 // src/components/DeployTool.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liiift-studio/deploy-vercel-from-sanity",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "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

@@ -17,6 +17,8 @@ import type { DeployTarget, VercelDeployment } from '../types'
 
 const POLL_INTERVAL_MS = 5_000
 const LABEL_WIDTH      = 64
+/** Max time (ms) to hold the optimistic pending state before giving up and deferring to real API status */
+const PENDING_TIMEOUT_MS = 60_000
 
 interface DeployItemProps {
 	target: DeployTarget
@@ -31,7 +33,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 
 	const [deployments, setDeployments]      = useState<VercelDeployment[]>([])
 	const [loadingInitial, setLoadingInitial] = useState(true)
-	const [triggering, setTriggering]        = useState(false)
+	const [pendingSince, setPendingSince]    = useState<number | null>(null)
 	const [canceling, setCanceling]          = useState(false)
 	const [deployError, setDeployError]      = useState<string | null>(null)
 	const [showHistory, setShowHistory]      = useState(false)
@@ -43,8 +45,13 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	const [loadingLogs, setLoadingLogs]      = useState(false)
 	const [logError, setLogError]            = useState<string | null>(null)
 
-	const latest   = deployments[0]
-	const isActive = triggering || isActiveState(latest?.state)
+	/** uid of the deployment that was latest when Deploy was clicked — lets us tell the optimistic state apart from a genuinely new deployment */
+	const triggeredFromUidRef = useRef<string | undefined>(undefined)
+
+	const latest = deployments[0]
+	/** True between the click and the API returning a new deployment — drives the optimistic "Queued" state */
+	const isPending = pendingSince !== null
+	const isActive  = isPending || isActiveState(latest?.state)
 
 	// ── Fetch deployments ──────────────────────────────────────────────────────
 	const fetchDeployments = useCallback(async () => {
@@ -67,9 +74,20 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 		return () => clearInterval(id)
 	}, [isActive, fetchDeployments])
 
+	// Hand off from the optimistic state only once the API returns a deployment
+	// that is not the one which was already latest when Deploy was clicked.
+	useEffect(() => {
+		if (!isPending) return
+		if (latest?.uid && latest.uid !== triggeredFromUidRef.current) setPendingSince(null)
+	}, [isPending, latest?.uid])
+
+	// Safety net — never strand the card in the optimistic state if the new
+	// deployment never appears (hook accepted but nothing was queued).
 	useEffect(() => {
-		if (triggering && latest && latest.state !== undefined) setTriggering(false)
-	}, [triggering, latest])
+		if (!isPending) return
+		const id = setTimeout(() => setPendingSince(null), PENDING_TIMEOUT_MS)
+		return () => clearTimeout(id)
+	}, [isPending])
 
 	//── Deploy-complete toast ─────────────────────────────────────────────────
 	const prevStateRef = useRef<string | undefined>(undefined)
@@ -98,7 +116,8 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 	useEffect(() => {
 		if (isActive) {
-			const start = latest?.created ?? Date.now()
+			// While optimistic, count from the click; once real, count from the deployment's own timestamp
+			const start = pendingSince ?? latest?.created ?? Date.now()
 			setElapsed(Math.floor((Date.now() - start) / 1000))
 			timerRef.current = setInterval(() => {
 				setElapsed(Math.floor((Date.now() - start) / 1000))
@@ -108,24 +127,27 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 			if (timerRef.current) clearInterval(timerRef.current)
 		}
 		return () => { if (timerRef.current) clearInterval(timerRef.current) }
-	}, [isActive, latest?.created])
+	}, [isActive, pendingSince, latest?.created])
 
 	// ── Actions ───────────────────────────────────────────────────────────────
 	const deploy = useCallback(() => {
+		// Paint the optimistic "Queued" state in the same frame as the click,
+		// before the hook request is even sent
 		flushSync(() => {
 			setDeployError(null)
-			setTriggering(true)
+			triggeredFromUidRef.current = latest?.uid
+			setPendingSince(Date.now())
 		})
 		void (async () => {
 			try {
 				await triggerDeploy(target.url)
 				setTimeout(fetchDeployments, 2000)
 			} catch (err) {
-				setTriggering(false)
+				setPendingSince(null)
 				setDeployError(err instanceof Error ? err.message : 'Deploy failed')
 			}
 		})()
-	}, [target.url, fetchDeployments])
+	}, [target.url, fetchDeployments, latest?.uid])
 
 	const cancel = useCallback(async () => {
 		if (!latest?.uid) return
@@ -218,8 +240,8 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 									)}
 									{token && !loadingInitial && (
 										<>
-											{triggering ? (
-												<Badge tone="caution" padding={2}>Triggering…</Badge>
+											{isPending ? (
+												<StatusBadge state="QUEUED" />
 											) : (
 												<StatusBadge state={latest?.state} />
 											)}
@@ -234,12 +256,15 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 													style={{ cursor: 'pointer' }}
 												/>
 											)}
-											{isActive && elapsed > 0 ? (
+											{isPending ? (
+												/* Optimistic — dimmed spinner only; no elapsed time until a real build exists */
+												<Spinner muted style={{ marginLeft: 4, opacity: 0.5 }} />
+											) : isActive ? (
 												<Flex align="center" gap={1}>
 													<Spinner muted style={{ marginLeft: 4 }} />
 													<Text size={1} muted>{formatDuration(elapsed)}</Text>
 												</Flex>
-											) : (!isActive && deployedAt) ? (
+											) : deployedAt ? (
 												<Text size={1} muted>{deployedAt}</Text>
 											) : null}
 										</>
@@ -562,6 +587,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 						<Button
 							text="Deploy"
 							tone="primary"
+							loading={isPending}
 							disabled={isActive}
 							onClick={deploy}
 							style={{

package/src/index.ts

@@ -13,7 +13,7 @@ export type { VercelDeployPluginConfig, DeployTarget, VercelDeployment, VercelDe
  *
  * @example
  * // sanity.config.ts
- * import { vercelDeploy } from 'deploy-vercel-from-sanity'
+ * import { vercelDeploy } from '@liiift-studio/deploy-vercel-from-sanity'
  *
  * export default defineConfig({
  *   plugins: [

package/src/version.ts

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