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

package/dist/index.mjs

@@ -1,24 +1,23 @@
 // src/index.ts
 import { definePlugin } from "sanity";
-import { RocketIcon as RocketIcon4 } from "@sanity/icons";
+import { RocketIcon as RocketIcon2 } from "@sanity/icons";
 
 // src/components/DeployTool.tsx
-import { useState as useState4, useEffect as useEffect3, useCallback as useCallback4 } from "react";
-import { useClient as useClient2 } from "sanity";
+import { useState as useState5, useEffect as useEffect3, useCallback as useCallback5 } from "react";
+import { useClient as useClient3 } from "sanity";
 import {
-  Card as Card4,
+  Card as Card5,
   Box as Box4,
-  Stack as Stack4,
-  Flex as Flex5,
-  Text as Text4,
-  Heading as Heading2,
+  Stack as Stack5,
+  Flex as Flex6,
+  Text as Text5,
+  Heading,
   Spinner as Spinner4,
-  Button as Button4,
-  Badge as Badge4,
-  Dialog as Dialog2,
+  Button as Button5,
+  Dialog as Dialog4,
   useToast
 } from "@sanity/ui";
-import { RocketIcon as RocketIcon2, TokenIcon as TokenIcon2, TrashIcon as TrashIcon2, WarningOutlineIcon as WarningOutlineIcon2 } from "@sanity/icons";
+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";
@@ -38,14 +37,16 @@ import {
   Code
 } from "@sanity/ui";
 import {
-  RocketIcon,
   ClockIcon,
   TrashIcon,
   EllipsisVerticalIcon,
   LaunchIcon as LaunchIcon2,
   CopyIcon,
   CheckmarkIcon,
-  WarningOutlineIcon
+  WarningOutlineIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  EditIcon
 } from "@sanity/icons";
 
 // src/lib/api.ts
@@ -190,7 +191,7 @@ function StatusBadge({ state, showSpinner }) {
   const spinning = showSpinner && (state === "QUEUED" || state === "INITIALIZING" || state === "BUILDING");
   return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
     spinning && /* @__PURE__ */ jsx(Spinner, { muted: true }),
-    /* @__PURE__ */ jsx(Badge, { tone, mode: "outline", children: label })
+    /* @__PURE__ */ jsx(Badge, { tone, padding: 2, children: label })
   ] });
 }
 
@@ -265,7 +266,7 @@ function DeployHistory({ target, token, onClose }) {
                   children: /* @__PURE__ */ jsx2(Text, { size: 1, style: { textDecoration: "underline" }, children: d.url.length > 36 ? `${d.url.slice(0, 36)}\u2026` : d.url })
                 }
               ) : /* @__PURE__ */ jsx2(Text, { size: 1, muted: true, children: "\u2014" }) }),
-              /* @__PURE__ */ jsx2(Box, { flex: 1, children: /* @__PURE__ */ jsx2(Badge2, { tone, mode: "outline", children: label }) }),
+              /* @__PURE__ */ jsx2(Box, { flex: 1, children: /* @__PURE__ */ jsx2(Badge2, { tone, children: label }) }),
               /* @__PURE__ */ jsx2(Box, { flex: 2, style: { overflow: "hidden" }, children: /* @__PURE__ */ jsxs2(Stack, { space: 1, children: [
                 /* @__PURE__ */ jsx2(Text, { size: 1, children: branch }),
                 sha && /* @__PURE__ */ jsxs2(Text, { size: 0, muted: true, children: [
@@ -295,7 +296,8 @@ function DeployHistory({ target, token, onClose }) {
 // src/components/DeployItem.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 5e3;
-function DeployItem({ target, token, onDelete }) {
+var LABEL_WIDTH = 64;
+function DeployItem({ target, token, onDelete, onEdit }) {
   const { projectId, hookId } = parseHookUrl(target.url);
   const [deployments, setDeployments] = useState2([]);
   const [loadingInitial, setLoadingInitial] = useState2(true);
@@ -305,6 +307,7 @@ function DeployItem({ target, token, onDelete }) {
   const [showHistory, setShowHistory] = useState2(false);
   const [elapsed, setElapsed] = useState2(0);
   const [copied, setCopied] = useState2(false);
+  const [showDetails, setShowDetails] = useState2(false);
   const [showErrorLogs, setShowErrorLogs] = useState2(false);
   const [errorLines, setErrorLines] = useState2([]);
   const [loadingLogs, setLoadingLogs] = useState2(false);
@@ -403,140 +406,134 @@ function DeployItem({ target, token, onDelete }) {
     }
   }, [latest?.uid, token, target.teamId]);
   const toggleErrorLogs = useCallback2(() => {
-    if (!showErrorLogs && errorLines.length === 0 && !logError) {
-      fetchErrorLogs();
-    }
+    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 fullSha = 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: 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__ */ 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: [
-              "Team: ",
-              target.teamId
-            ] })
-          ] })
-        ] }),
-        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 })
+    /* @__PURE__ */ jsx3(Card2, { radius: 2, shadow: 1, tone: "default", children: /* @__PURE__ */ jsxs3(Flex3, { align: "stretch", className: "dvfs-card-flex", children: [
+      /* @__PURE__ */ jsxs3(Flex3, { direction: "column", flex: 1, style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs3(Stack2, { space: 3, padding: 3, style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxs3(Flex3, { align: "center", justify: "space-between", gap: 2, children: [
+            /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 2, style: { minWidth: 0, flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 2, weight: "semibold", style: { flexShrink: 0 }, children: target.name }),
+              branch && /* @__PURE__ */ jsx3(Badge3, { tone: "default", padding: 2, children: /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
+                branch,
+                /* @__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 }),
+                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
+              ] })
             ] }),
-            sha && /* @__PURE__ */ jsx3(
-              Tooltip,
+            /* @__PURE__ */ jsx3(
+              MenuButton,
               {
-                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
-                  }
-                )
+                button: /* @__PURE__ */ jsx3(Button2, { mode: "ghost", icon: EllipsisVerticalIcon, padding: 2 }),
+                id: `menu-${target._id}`,
+                menu: /* @__PURE__ */ jsxs3(Menu, { children: [
+                  /* @__PURE__ */ jsx3(
+                    MenuItem,
+                    {
+                      text: "Edit target",
+                      icon: EditIcon,
+                      onClick: () => onEdit(target)
+                    }
+                  ),
+                  /* @__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" }
               }
-            ),
-            creator && /* @__PURE__ */ jsxs3(Text2, { size: 1, muted: true, children: [
-              "by ",
-              creator
-            ] }),
-            latest?.url && latest.state === "READY" && /* @__PURE__ */ jsxs3(Fragment, { children: [
-              /* @__PURE__ */ jsx3(
+            )
+          ] }),
+          /* @__PURE__ */ jsx3("hr", { style: { border: "none", borderTop: "1px solid currentColor", opacity: 0.1, margin: 0 } }),
+          !token ? /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: "Connect a Vercel API token to see deployment status." }) : 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: [
+              latest?.url && latest.state === "READY" && /* @__PURE__ */ jsx3(Fragment, { children: /* @__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" })
-                  ] })
+                  children: /* @__PURE__ */ jsx3(Flex3, { align: "center", gap: 1, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: latest.url }) })
+                }
+              ) }),
+              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
+                    }
+                  )
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              creator && /* @__PURE__ */ jsxs3(Text2, { size: 1, muted: true, children: [
+                "by ",
+                creator
+              ] }),
+              latest?.url && latest.state === "READY" && /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3(
                 Tooltip,
                 {
                   content: /* @__PURE__ */ jsx3(Box2, { padding: 2, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: copied ? "Copied!" : "Copy URL" }) }),
@@ -548,100 +545,120 @@ function DeployItem({ target, token, onDelete }) {
                       icon: copied ? CheckmarkIcon : CopyIcon,
                       padding: 1,
                       tone: copied ? "positive" : "default",
-                      onClick: copyUrl
+                      onClick: copyUrl,
+                      style: { cursor: "pointer" }
                     }
                   )
                 }
-              )
-            ] })
-          ] }),
-          commitMsg && /* @__PURE__ */ jsx3(
-            Text2,
-            {
-              size: 0,
-              muted: true,
-              style: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: commitMsg
-            }
-          ),
-          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__ */ jsxs3(Flex3, { align: "center", gap: 2, wrap: "wrap", children: [
+              commitMsg && /* @__PURE__ */ jsx3(
+                Text2,
+                {
+                  size: 0,
+                  muted: true,
+                  style: { fontStyle: "italic" },
+                  children: commitMsg
+                }
+              ),
+              isError && /* @__PURE__ */ jsxs3(Stack2, { space: 2, children: [
                 /* @__PURE__ */ jsx3(
-                  Box2,
+                  Button2,
                   {
-                    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
-                    ))
+                    text: showErrorLogs ? "Hide error details" : "Show error details",
+                    mode: "ghost",
+                    tone: "critical",
+                    icon: WarningOutlineIcon,
+                    fontSize: 1,
+                    padding: 2,
+                    onClick: toggleErrorLogs,
+                    style: { alignSelf: "flex-start", cursor: "pointer" }
                   }
                 ),
-                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: [
+                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(Box2, { children: [
+          /* @__PURE__ */ jsx3(
+            Button2,
+            {
+              mode: "ghost",
+              iconRight: showDetails ? ChevronUpIcon : ChevronDownIcon,
+              text: "Details",
+              fontSize: 0,
+              padding: 3,
+              onClick: () => setShowDetails((v) => !v),
+              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: [
+            /* @__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" })
+            ] }),
+            /* @__PURE__ */ jsxs3(Flex3, { gap: 2, align: "center", children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "Hook" }),
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, style: { fontFamily: "monospace" }, children: hookId || "\u2014" })
+            ] }),
+            target.teamId && /* @__PURE__ */ jsxs3(Flex3, { gap: 2, align: "center", children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "Team" }),
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, style: { fontFamily: "monospace" }, children: target.teamId })
+            ] }),
+            fullSha && /* @__PURE__ */ jsxs3(Flex3, { gap: 2, align: "flex-start", children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "Commit" }),
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, style: { fontFamily: "monospace", wordBreak: "break-all" }, children: fullSha })
+            ] }),
+            latest?.meta?.githubCommitAuthorName && /* @__PURE__ */ jsxs3(Flex3, { gap: 2, align: "center", children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "Author" }),
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, children: latest.meta.githubCommitAuthorName })
+            ] }),
+            branch && /* @__PURE__ */ jsxs3(Flex3, { gap: 2, align: "center", children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "Branch" }),
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, style: { fontFamily: "monospace" }, children: branch })
+            ] }),
+            latest?.uid && /* @__PURE__ */ jsxs3(Flex3, { gap: 2, align: "center", children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "Deploy ID" }),
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, style: { fontFamily: "monospace" }, children: latest.uid })
+            ] }),
+            latest?.url && /* @__PURE__ */ jsxs3(Flex3, { gap: 2, align: "flex-start", children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "URL" }),
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, style: { fontFamily: "monospace", wordBreak: "break-all" }, children: latest.url })
+            ] }),
+            safeHref(latest?.inspectorUrl) && /* @__PURE__ */ jsxs3(Flex3, { gap: 2, align: "center", children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "Inspector" }),
+              /* @__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(Text2, { size: 0, muted: true, style: { fontFamily: "monospace" }, children: "Open in Vercel" }),
+                /* @__PURE__ */ jsx3(LaunchIcon2, { style: { width: 10, height: 10 } })
+              ] }) })
+            ] }),
+            latest?.created && /* @__PURE__ */ jsxs3(Flex3, { gap: 2, align: "center", children: [
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, weight: "semibold", style: { minWidth: LABEL_WIDTH }, children: "Created" }),
+              /* @__PURE__ */ jsx3(Text2, { size: 0, muted: true, children: new Date(latest.created).toLocaleString() })
+            ] })
+          ] }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs3(
@@ -649,6 +666,7 @@ function DeployItem({ target, token, onDelete }) {
         {
           direction: "column",
           gap: 2,
+          className: "dvfs-deploy-col",
           style: { flexShrink: 0, alignSelf: "stretch" },
           children: [
             isActiveState(latest?.state) && /* @__PURE__ */ jsx3(
@@ -659,7 +677,8 @@ function DeployItem({ target, token, onDelete }) {
                 tone: "critical",
                 loading: canceling,
                 disabled: canceling,
-                onClick: cancel
+                onClick: cancel,
+                style: { cursor: "pointer" }
               }
             ),
             /* @__PURE__ */ jsx3(
@@ -667,11 +686,16 @@ function DeployItem({ target, token, onDelete }) {
               {
                 text: "Deploy",
                 tone: "primary",
-                icon: RocketIcon,
                 loading: triggering,
                 disabled: isActive,
                 onClick: deploy,
-                style: { flex: 1 }
+                style: {
+                  flex: 1,
+                  borderRadius: 0,
+                  borderTopRightRadius: 3,
+                  borderBottomRightRadius: 3,
+                  cursor: "pointer"
+                }
               }
             )
           ]
@@ -692,19 +716,11 @@ function DeployItem({ target, token, onDelete }) {
 // src/components/TokenSetup.tsx
 import { useState as useState3, useCallback as useCallback3 } from "react";
 import { useClient } from "sanity";
-import {
-  Card as Card3,
-  Stack as Stack3,
-  Text as Text3,
-  Heading,
-  TextInput,
-  Button as Button3,
-  Flex as Flex4
-} from "@sanity/ui";
-import { TokenIcon, CheckmarkCircleIcon } from "@sanity/icons";
+import { Stack as Stack3, Text as Text3, TextInput, Button as Button3, Card as Card3, Dialog as Dialog2, Flex as Flex4 } from "@sanity/ui";
+import { CheckmarkCircleIcon } from "@sanity/icons";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var TOKEN_DOC_ID = "config.vercelDeploy";
-function TokenSetup({ onSaved }) {
+function TokenSetup({ onSaved, onCancel }) {
   const client = useClient({ apiVersion: "2025-01-01" });
   const [token, setToken] = useState3("");
   const [saving, setSaving] = useState3(false);
@@ -726,68 +742,217 @@ function TokenSetup({ onSaved }) {
       setSaving(false);
     }
   }, [client, token, onSaved]);
-  return /* @__PURE__ */ jsx4(Card3, { height: "fill", tone: "transparent", children: /* @__PURE__ */ jsx4(Flex4, { align: "center", justify: "center", height: "fill", padding: 6, children: /* @__PURE__ */ jsx4(Card3, { padding: 5, radius: 3, shadow: 1, style: { maxWidth: 480, width: "100%" }, children: /* @__PURE__ */ jsxs4(Stack3, { space: 5, children: [
-    /* @__PURE__ */ jsxs4(Flex4, { align: "center", gap: 3, children: [
-      /* @__PURE__ */ jsx4(Text3, { size: 3, children: /* @__PURE__ */ jsx4(TokenIcon, {}) }),
-      /* @__PURE__ */ jsx4(Heading, { size: 2, children: "Connect to Vercel" })
-    ] }),
-    /* @__PURE__ */ jsxs4(Stack3, { space: 3, children: [
-      /* @__PURE__ */ jsxs4(Text3, { size: 1, muted: true, children: [
-        "A Vercel API token is required to read deployment status, history, and build logs. Your token is stored securely in the Sanity dataset under a",
-        " ",
-        /* @__PURE__ */ jsx4("code", { children: "secrets.*" }),
-        " document ID that is not publicly readable."
+  return /* @__PURE__ */ jsx4(
+    Dialog2,
+    {
+      header: "Connect Vercel API token",
+      id: "token-setup",
+      onClose: onCancel,
+      width: 1,
+      footer: /* @__PURE__ */ jsxs4(Flex4, { padding: 3, gap: 2, justify: "flex-end", children: [
+        onCancel && /* @__PURE__ */ jsx4(Button3, { text: "Cancel", mode: "ghost", onClick: onCancel, style: { cursor: "pointer" } }),
+        /* @__PURE__ */ jsx4(
+          Button3,
+          {
+            text: "Save and connect",
+            tone: "primary",
+            icon: CheckmarkCircleIcon,
+            loading: saving,
+            disabled: !token.trim() || saving,
+            onClick: save,
+            style: { cursor: "pointer" }
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxs4(Text3, { size: 1, muted: true, children: [
-        "Create a token at",
-        " ",
-        /* @__PURE__ */ jsx4("strong", { children: "vercel.com \u2192 Settings \u2192 Tokens" }),
-        ". Choose ",
-        /* @__PURE__ */ jsx4("strong", { children: "Full Account" }),
-        " scope."
+      children: /* @__PURE__ */ jsxs4(Stack3, { space: 4, padding: 4, children: [
+        /* @__PURE__ */ jsxs4(Stack3, { space: 3, children: [
+          /* @__PURE__ */ jsx4(Text3, { size: 1, muted: true, children: "A Vercel API token lets this tool read deployment status, history, build logs, and branch metadata. Without it you can still trigger deploys \u2014 you just won't see any feedback." }),
+          /* @__PURE__ */ jsxs4(Text3, { size: 1, muted: true, children: [
+            "Create one at ",
+            /* @__PURE__ */ jsx4("strong", { children: "vercel.com \u2192 Settings \u2192 Tokens" }),
+            " with",
+            " ",
+            /* @__PURE__ */ jsx4("strong", { children: "Full Account" }),
+            " scope. The token is stored in your Sanity dataset and shared across all authenticated studio users."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4(Stack3, { space: 2, children: [
+          /* @__PURE__ */ jsx4(Text3, { size: 1, weight: "semibold", children: "Vercel API Token" }),
+          /* @__PURE__ */ jsx4(
+            TextInput,
+            {
+              value: token,
+              onChange: (e) => setToken(e.target.value),
+              placeholder: "xxxxxxxxxxxxxxxxxxxxxxxx",
+              type: "password"
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsx4(Card3, { tone: "critical", padding: 3, radius: 2, children: /* @__PURE__ */ jsx4(Text3, { size: 1, children: error }) })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs4(Stack3, { space: 3, children: [
-      /* @__PURE__ */ jsx4(Text3, { size: 1, weight: "semibold", children: "Vercel API Token" }),
-      /* @__PURE__ */ jsx4(
-        TextInput,
-        {
-          value: token,
-          onChange: (e) => setToken(e.target.value),
-          placeholder: "xxxxxxxxxxxxxxxxxxxxxxxx",
-          type: "password"
-        }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsx4(Card3, { tone: "critical", padding: 3, radius: 2, children: /* @__PURE__ */ jsx4(Text3, { size: 1, children: error }) }),
-    /* @__PURE__ */ jsx4(
-      Button3,
-      {
-        text: "Save and connect",
-        tone: "primary",
-        icon: CheckmarkCircleIcon,
-        loading: saving,
-        disabled: !token.trim() || saving,
-        onClick: save
+    }
+  );
+}
+
+// src/components/DeployTargetForm.tsx
+import { useState as useState4, useCallback as useCallback4 } from "react";
+import { useClient as useClient2 } from "sanity";
+import {
+  Dialog as Dialog3,
+  Box as Box3,
+  Stack as Stack4,
+  Flex as Flex5,
+  Text as Text4,
+  TextInput as TextInput2,
+  Button as Button4,
+  Switch,
+  Label,
+  Card as Card4
+} from "@sanity/ui";
+import { CheckmarkCircleIcon as CheckmarkCircleIcon2 } from "@sanity/icons";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var VERCEL_HOOK_RE2 = /^https:\/\/api\.vercel\.com\/v1\/integrations\/deploy\//;
+function DeployTargetForm({ initial, onSaved, onClose }) {
+  const client = useClient2({ apiVersion: "2025-01-01" });
+  const isEdit = Boolean(initial);
+  const [name, setName] = useState4(initial?.name ?? "");
+  const [url, setUrl] = useState4(initial?.url ?? "");
+  const [teamId, setTeamId] = useState4(initial?.teamId ?? "");
+  const [disableDelete, setDisableDelete] = useState4(initial?.disableDeleteAction ?? false);
+  const [saving, setSaving] = useState4(false);
+  const [error, setError] = useState4(null);
+  const urlValid = !url || VERCEL_HOOK_RE2.test(url.trim());
+  const canSave = name.trim() && url.trim() && urlValid;
+  const save = useCallback4(async () => {
+    if (!canSave) return;
+    setSaving(true);
+    setError(null);
+    const fields = {
+      name: name.trim(),
+      url: url.trim(),
+      ...teamId.trim() ? { teamId: teamId.trim() } : { teamId: null },
+      disableDeleteAction: disableDelete
+    };
+    try {
+      if (isEdit && initial) {
+        await client.patch(initial._id).set(fields).commit();
+      } else {
+        await client.create({ _type: "vercel_deploy", ...fields });
       }
-    )
-  ] }) }) }) });
+      onSaved();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Save failed");
+    } finally {
+      setSaving(false);
+    }
+  }, [canSave, isEdit, initial, client, name, url, teamId, disableDelete, onSaved]);
+  return /* @__PURE__ */ jsx5(
+    Dialog3,
+    {
+      header: isEdit ? `Edit "${initial?.name}"` : "Add deploy target",
+      id: "deploy-target-form",
+      onClose,
+      width: 1,
+      footer: /* @__PURE__ */ jsxs5(Flex5, { padding: 3, gap: 2, justify: "flex-end", children: [
+        /* @__PURE__ */ jsx5(Button4, { text: "Cancel", mode: "ghost", onClick: onClose, style: { cursor: "pointer" } }),
+        /* @__PURE__ */ jsx5(
+          Button4,
+          {
+            text: isEdit ? "Save changes" : "Add target",
+            tone: "primary",
+            icon: CheckmarkCircleIcon2,
+            loading: saving,
+            disabled: !canSave || saving,
+            onClick: save,
+            style: { cursor: "pointer" }
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx5(Box3, { padding: 4, children: /* @__PURE__ */ jsxs5(Stack4, { space: 4, children: [
+        /* @__PURE__ */ jsxs5(Stack4, { space: 2, children: [
+          /* @__PURE__ */ jsxs5(Label, { size: 1, children: [
+            "Name ",
+            /* @__PURE__ */ jsx5("span", { style: { color: "var(--card-fg-color)" }, children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx5(
+            TextInput2,
+            {
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              placeholder: "Production"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5(Stack4, { space: 2, children: [
+          /* @__PURE__ */ jsxs5(Label, { size: 1, children: [
+            "Deploy hook URL ",
+            /* @__PURE__ */ jsx5("span", { style: { color: "var(--card-fg-color)" }, children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx5(
+            TextInput2,
+            {
+              value: url,
+              onChange: (e) => setUrl(e.target.value),
+              placeholder: "https://api.vercel.com/v1/integrations/deploy/\u2026"
+            }
+          ),
+          url && !urlValid && /* @__PURE__ */ jsx5(Text4, { size: 1, style: { color: "var(--card-critical-fg-color, red)" }, children: "Must be a Vercel deploy hook URL (api.vercel.com/v1/integrations/deploy/\u2026)" }),
+          /* @__PURE__ */ jsx5(Text4, { size: 0, muted: true, children: "Vercel dashboard \u2192 Project \u2192 Settings \u2192 Git \u2192 Deploy Hooks" })
+        ] }),
+        /* @__PURE__ */ jsxs5(Stack4, { space: 2, children: [
+          /* @__PURE__ */ jsxs5(Label, { size: 1, children: [
+            "Team ID ",
+            /* @__PURE__ */ jsx5("span", { style: { opacity: 0.5, fontWeight: "normal" }, children: "\u2014 optional" })
+          ] }),
+          /* @__PURE__ */ jsx5(
+            TextInput2,
+            {
+              value: teamId,
+              onChange: (e) => setTeamId(e.target.value),
+              placeholder: "team_xxxxxxxx"
+            }
+          ),
+          /* @__PURE__ */ jsx5(Text4, { size: 0, muted: true, children: "Required for team-owned Vercel projects." })
+        ] }),
+        /* @__PURE__ */ jsxs5(Flex5, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx5(
+            Switch,
+            {
+              checked: disableDelete,
+              onChange: (e) => setDisableDelete(e.target.checked),
+              id: "disable-delete"
+            }
+          ),
+          /* @__PURE__ */ jsxs5(Stack4, { space: 1, children: [
+            /* @__PURE__ */ jsx5(Label, { size: 1, htmlFor: "disable-delete", children: "Disable delete action" }),
+            /* @__PURE__ */ jsx5(Text4, { size: 0, muted: true, children: "Hides the delete button for this target in the studio." })
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsx5(Card4, { tone: "critical", padding: 3, radius: 2, children: /* @__PURE__ */ jsx5(Text4, { size: 1, children: error }) })
+      ] }) })
+    }
+  );
 }
 
+// src/version.ts
+var VERSION = "0.2.0";
+
 // src/components/DeployTool.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var TOKEN_QUERY = `*[_id == "config.vercelDeploy"][0].accessToken`;
 var TARGETS_QUERY = `*[_type == "vercel_deploy"] | order(_createdAt asc)`;
 function DeployTool() {
-  const client = useClient2({ apiVersion: "2025-01-01" });
+  const client = useClient3({ apiVersion: "2025-01-01" });
   const toast = useToast();
-  const [token, setToken] = useState4(null);
-  const [targets, setTargets] = useState4([]);
-  const [loading, setLoading] = useState4(true);
-  const [showTokenSetup, setShowTokenSetup] = useState4(false);
-  const [pendingDelete, setPendingDelete] = useState4(null);
-  const [deleting, setDeleting] = useState4(false);
-  const load = useCallback4(async () => {
+  const [token, setToken] = useState5(null);
+  const [targets, setTargets] = useState5([]);
+  const [loading, setLoading] = useState5(true);
+  const [showTokenSetup, setShowTokenSetup] = useState5(false);
+  const [showCreateForm, setShowCreateForm] = useState5(false);
+  const [pendingEdit, setPendingEdit] = useState5(null);
+  const [pendingDelete, setPendingDelete] = useState5(null);
+  const [deleting, setDeleting] = useState5(false);
+  const load = useCallback5(async () => {
     setLoading(true);
     try {
       const [fetchedToken, fetchedTargets] = await Promise.all([
@@ -805,6 +970,25 @@ function DeployTool() {
   useEffect3(() => {
     load();
   }, [load]);
+  useEffect3(() => {
+    if (document.getElementById("dvfs-styles")) return;
+    const style = document.createElement("style");
+    style.id = "dvfs-styles";
+    style.textContent = `
+			@media (max-width: 600px) {
+				.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; }
+				.dvfs-card-flex { flex-direction: column !important; }
+				.dvfs-deploy-col { width: 100% !important; align-self: auto !important; }
+				.dvfs-deploy-col button { border-radius: 3px !important; }
+			}
+		`;
+    document.head.appendChild(style);
+    return () => {
+      document.getElementById("dvfs-styles")?.remove();
+    };
+  }, []);
   useEffect3(() => {
     const sub = client.listen(TARGETS_QUERY).subscribe(() => {
       client.fetch(TARGETS_QUERY).then(setTargets).catch((err) => {
@@ -813,7 +997,7 @@ function DeployTool() {
     });
     return () => sub.unsubscribe();
   }, [client]);
-  const confirmDelete = useCallback4(async () => {
+  const confirmDelete = useCallback5(async () => {
     if (!pendingDelete) return;
     setDeleting(true);
     try {
@@ -828,96 +1012,173 @@ function DeployTool() {
     }
   }, [client, pendingDelete, toast]);
   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 }) }) });
+    return /* @__PURE__ */ jsx6(Card5, { height: "fill", tone: "transparent", children: /* @__PURE__ */ jsx6(Flex6, { align: "center", justify: "center", height: "fill", children: /* @__PURE__ */ jsx6(Spinner4, { muted: true }) }) });
   }
-  if (!token || showTokenSetup) {
-    return /* @__PURE__ */ jsx5(
-      TokenSetup,
-      {
-        onSaved: () => {
-          setShowTokenSetup(false);
-          load();
-        }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs5(Card4, { height: "fill", tone: "transparent", children: [
-    /* @__PURE__ */ jsx5(Box4, { padding: 5, children: /* @__PURE__ */ jsxs5(Stack4, { space: 5, children: [
-      /* @__PURE__ */ jsxs5(Flex5, { align: "center", justify: "space-between", children: [
-        /* @__PURE__ */ jsxs5(Flex5, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx5(RocketIcon2, {}),
-          /* @__PURE__ */ jsx5(Heading2, { size: 2, children: "Deploy" })
-        ] }),
-        /* @__PURE__ */ jsxs5(Flex5, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx5(Badge4, { tone: "positive", mode: "outline", children: "Connected" }),
-          /* @__PURE__ */ jsx5(
-            Button4,
+  return /* @__PURE__ */ jsxs6(Card5, { height: "fill", tone: "transparent", children: [
+    /* @__PURE__ */ jsx6(Box4, { padding: 5, children: /* @__PURE__ */ jsxs6(Stack5, { space: 5, children: [
+      /* @__PURE__ */ jsxs6(Flex6, { align: "center", justify: "space-between", className: "dvfs-header", children: [
+        /* @__PURE__ */ jsx6(Heading, { size: 2, children: "Deploy with Vercel" }),
+        /* @__PURE__ */ jsxs6(Flex6, { align: "center", gap: 3, className: "dvfs-header-actions", children: [
+          /* @__PURE__ */ jsx6(
+            Button5,
+            {
+              text: token ? "Token connected" : "Connect API token",
+              mode: "ghost",
+              icon: TokenIcon,
+              fontSize: 1,
+              tone: token ? "positive" : "caution",
+              onClick: () => setShowTokenSetup(true),
+              style: { cursor: "pointer" }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            Button5,
             {
-              text: "Change Token",
+              text: "Add target",
               mode: "ghost",
-              icon: TokenIcon2,
+              icon: AddIcon,
               fontSize: 1,
-              onClick: () => setShowTokenSetup(true)
+              onClick: () => setShowCreateForm(true),
+              style: { cursor: "pointer" }
             }
           )
         ] })
       ] }),
-      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."
-        ] })
+      !token && /* @__PURE__ */ jsx6(Card5, { padding: 4, radius: 2, tone: "caution", shadow: 1, children: /* @__PURE__ */ jsxs6(Flex6, { align: "center", justify: "space-between", gap: 4, children: [
+        /* @__PURE__ */ jsxs6(Stack5, { space: 2, children: [
+          /* @__PURE__ */ jsx6(Text5, { size: 1, weight: "semibold", children: "Deploy status is not connected" }),
+          /* @__PURE__ */ jsx6(Text5, { size: 1, muted: true, children: "You can trigger deploys now. Connect a Vercel API token to also see deployment status, build logs, history, and commit metadata." })
+        ] }),
+        /* @__PURE__ */ jsx6(
+          Button5,
+          {
+            text: "Connect",
+            tone: "caution",
+            fontSize: 1,
+            onClick: () => setShowTokenSetup(true),
+            style: { cursor: "pointer", flexShrink: 0 }
+          }
+        )
+      ] }) }),
+      targets.length === 0 && /* @__PURE__ */ jsx6(Card5, { padding: 5, radius: 2, tone: "transparent", shadow: 1, children: /* @__PURE__ */ jsxs6(Stack5, { space: 4, style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx6(Text5, { size: 2, weight: "semibold", children: "No deploy targets configured" }),
+        /* @__PURE__ */ jsxs6(Text5, { size: 1, muted: true, children: [
+          "Add a deploy target using the button above, or create a",
+          " ",
+          /* @__PURE__ */ jsx6("code", { children: "vercel_deploy" }),
+          " document directly in the dataset."
+        ] }),
+        /* @__PURE__ */ jsx6(Flex6, { justify: "center", children: /* @__PURE__ */ jsx6(
+          Button5,
+          {
+            text: "Add deploy target",
+            tone: "primary",
+            icon: AddIcon,
+            onClick: () => setShowCreateForm(true),
+            style: { cursor: "pointer" }
+          }
+        ) })
       ] }) }),
-      targets.length > 0 && /* @__PURE__ */ jsx5("div", { style: {
+      targets.length > 0 && /* @__PURE__ */ jsx6("div", { className: "dvfs-grid", style: {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fill, minmax(540px, 1fr))",
-        gap: "16px"
-      }, children: targets.map((target) => /* @__PURE__ */ jsx5(
+        gap: "16px",
+        alignItems: "start"
+      }, children: targets.map((target) => /* @__PURE__ */ jsx6(
         DeployItem,
         {
           target,
-          token,
-          onDelete: setPendingDelete
+          token: token ?? "",
+          onDelete: setPendingDelete,
+          onEdit: setPendingEdit
         },
         target._id
       )) })
     ] }) }),
-    pendingDelete && /* @__PURE__ */ jsx5(
-      Dialog2,
+    /* @__PURE__ */ jsx6(
+      Box4,
+      {
+        style: {
+          position: "fixed",
+          bottom: 12,
+          right: 16,
+          opacity: 0.25,
+          pointerEvents: "none",
+          userSelect: "none"
+        },
+        children: /* @__PURE__ */ jsxs6(Text5, { size: 0, muted: true, children: [
+          "v",
+          VERSION
+        ] })
+      }
+    ),
+    showTokenSetup && /* @__PURE__ */ jsx6(
+      TokenSetup,
+      {
+        onSaved: () => {
+          setShowTokenSetup(false);
+          load();
+        },
+        onCancel: token ? () => setShowTokenSetup(false) : void 0
+      }
+    ),
+    showCreateForm && /* @__PURE__ */ jsx6(
+      DeployTargetForm,
+      {
+        onSaved: () => {
+          setShowCreateForm(false);
+          toast.push({ status: "success", title: "Deploy target added" });
+        },
+        onClose: () => setShowCreateForm(false)
+      }
+    ),
+    pendingEdit && /* @__PURE__ */ jsx6(
+      DeployTargetForm,
+      {
+        initial: pendingEdit,
+        onSaved: () => {
+          setPendingEdit(null);
+          toast.push({ status: "success", title: "Deploy target updated" });
+        },
+        onClose: () => setPendingEdit(null)
+      }
+    ),
+    pendingDelete && /* @__PURE__ */ jsx6(
+      Dialog4,
       {
         header: "Delete deploy target?",
         id: "confirm-delete",
         onClose: () => setPendingDelete(null),
         width: 1,
-        footer: /* @__PURE__ */ jsxs5(Flex5, { padding: 3, gap: 2, justify: "flex-end", children: [
-          /* @__PURE__ */ jsx5(
-            Button4,
+        footer: /* @__PURE__ */ jsxs6(Flex6, { padding: 3, gap: 2, justify: "flex-end", children: [
+          /* @__PURE__ */ jsx6(
+            Button5,
             {
               text: "Cancel",
               mode: "ghost",
-              onClick: () => setPendingDelete(null)
+              onClick: () => setPendingDelete(null),
+              style: { cursor: "pointer" }
             }
           ),
-          /* @__PURE__ */ jsx5(
-            Button4,
+          /* @__PURE__ */ jsx6(
+            Button5,
             {
               text: "Delete",
               tone: "critical",
               icon: TrashIcon2,
               loading: deleting,
               disabled: deleting,
-              onClick: confirmDelete
+              onClick: confirmDelete,
+              style: { cursor: "pointer" }
             }
           )
         ] }),
-        children: /* @__PURE__ */ jsx5(Box4, { padding: 4, children: /* @__PURE__ */ jsxs5(Stack4, { space: 3, children: [
-          /* @__PURE__ */ jsxs5(Flex5, { align: "center", gap: 2, children: [
-            /* @__PURE__ */ jsx5(WarningOutlineIcon2, {}),
-            /* @__PURE__ */ jsx5(Text4, { size: 2, weight: "semibold", children: pendingDelete.name })
+        children: /* @__PURE__ */ jsx6(Box4, { padding: 4, children: /* @__PURE__ */ jsxs6(Stack5, { space: 3, children: [
+          /* @__PURE__ */ jsxs6(Flex6, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx6(WarningOutlineIcon2, {}),
+            /* @__PURE__ */ jsx6(Text5, { 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." })
+          /* @__PURE__ */ jsx6(Text5, { size: 1, muted: true, children: "This removes the deploy target from the dataset. The Vercel deploy hook itself is not affected." })
         ] }) })
       }
     )
@@ -926,12 +1187,12 @@ function DeployTool() {
 
 // src/schema/vercelDeploy.ts
 import { defineField, defineType } from "sanity";
-import { RocketIcon as RocketIcon3 } from "@sanity/icons";
+import { RocketIcon } from "@sanity/icons";
 var vercelDeploySchema = defineType({
   name: "vercel_deploy",
   title: "Deploy Target",
   type: "document",
-  icon: RocketIcon3,
+  icon: RocketIcon,
   fields: [
     defineField({
       name: "name",
@@ -984,7 +1245,7 @@ var vercelDeploy = definePlugin((options) => {
       {
         name: config.name ?? "vercel-deploy",
         title: config.title ?? "Deploy",
-        icon: config.icon ?? RocketIcon4,
+        icon: config.icon ?? RocketIcon2,
         component: DeployTool
       }
     ]