@liiift-studio/deploy-vercel-from-sanity 0.1.3 → 0.1.6

package/src/components/DeployTool.tsx

@@ -2,14 +2,14 @@
 import { useState, useEffect, useCallback } from 'react'
 import { useClient } from 'sanity'
 import {
-	Card, Box, Stack, Flex, Text, Heading, Spinner, Button, Dialog, useToast,
+	Card, Box, Stack, Flex, Text, Heading, Spinner, Button, Badge, Dialog, useToast,
 } from '@sanity/ui'
 import { RocketIcon, TokenIcon, TrashIcon, WarningOutlineIcon } from '@sanity/icons'
 import { DeployItem } from './DeployItem'
 import { TokenSetup } from './TokenSetup'
 import type { DeployTarget } from '../types'
 
-const TOKEN_QUERY = `*[_id == "secrets.vercelDeploy"][0].accessToken`
+const TOKEN_QUERY = `*[_id == "config.vercelDeploy"][0].accessToken`
 const TARGETS_QUERY = `*[_type == "vercel_deploy"] | order(_createdAt asc)`
 
 export function DeployTool() {
@@ -81,11 +81,7 @@ export function DeployTool() {
 		)
 	}
 
-	if (!token && !showTokenSetup) {
-		return <TokenSetup onSaved={() => { setShowTokenSetup(false); load() }} />
-	}
-
-	if (showTokenSetup) {
+	if (!token || showTokenSetup) {
 		return (
 			<TokenSetup
 				onSaved={() => {
@@ -106,13 +102,16 @@ export function DeployTool() {
 							<RocketIcon />
 							<Heading size={2}>Deploy</Heading>
 						</Flex>
-						<Button
-							text="API Token"
-							mode="ghost"
-							icon={TokenIcon}
-							fontSize={1}
-							onClick={() => setShowTokenSetup(true)}
-						/>
+						<Flex align="center" gap={3}>
+							<Badge tone="positive" mode="outline">Connected</Badge>
+							<Button
+								text="Change Token"
+								mode="ghost"
+								icon={TokenIcon}
+								fontSize={1}
+								onClick={() => setShowTokenSetup(true)}
+							/>
+						</Flex>
 					</Flex>
 
 					{/* ── No targets ──────────────────────────────────────────── */}
@@ -121,22 +120,30 @@ export function DeployTool() {
 							<Stack space={3} style={{ textAlign: 'center' }}>
 								<Text size={2} weight="semibold">No deploy targets configured</Text>
 								<Text size={1} muted>
-									Create a <code>vercel_deploy</code> document in the dataset with a Vercel deploy
-									hook URL, or add one via the Sanity CLI.
+									Create a <code>vercel_deploy</code> document in the dataset with a Vercel
+									deploy hook URL.
 								</Text>
 							</Stack>
 						</Card>
 					)}
 
-					{/* ── Deploy targets ──────────────────────────────────────── */}
-					{token && targets.map(target => (
-						<DeployItem
-							key={target._id}
-							target={target}
-							token={token}
-							onDelete={setPendingDelete}
-						/>
-					))}
+					{/* ── Deploy targets — responsive 2-col grid ──────────────── */}
+					{targets.length > 0 && (
+						<div style={{
+							display: 'grid',
+							gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))',
+							gap: '12px',
+						}}>
+							{targets.map(target => (
+								<DeployItem
+									key={target._id}
+									target={target}
+									token={token}
+									onDelete={setPendingDelete}
+								/>
+							))}
+						</div>
+					)}
 				</Stack>
 			</Box>
 
@@ -172,8 +179,8 @@ export function DeployTool() {
 								<Text size={2} weight="semibold">{pendingDelete.name}</Text>
 							</Flex>
 							<Text size={1} muted>
-								This removes the deploy target from the dataset. The Vercel deploy hook itself is
-								not affected.
+								This removes the deploy target from the dataset. The Vercel deploy hook
+								itself is not affected.
 							</Text>
 						</Stack>
 					</Box>

package/src/components/TokenSetup.tsx

@@ -11,7 +11,7 @@ interface TokenSetupProps {
 	onSaved: () => void
 }
 
-const TOKEN_DOC_ID = 'secrets.vercelDeploy'
+const TOKEN_DOC_ID = 'config.vercelDeploy'
 
 export function TokenSetup({ onSaved }: TokenSetupProps) {
 	const client = useClient({ apiVersion: '2025-01-01' })

package/src/lib/api.ts

@@ -1,8 +1,11 @@
 // Vercel REST API helpers — all calls require a bearer token
-import type { VercelDeployment } from '../types'
+import type { VercelDeployment, DeploymentEvent } from '../types'
 
 const BASE = 'https://api.vercel.com'
 
+/** Only allow genuine Vercel deploy hook URLs through triggerDeploy */
+const VERCEL_HOOK_RE = /^https:\/\/api\.vercel\.com\/v1\/integrations\/deploy\//
+
 async function vercelFetch<T>(path: string, token: string, init?: RequestInit): Promise<T> {
 	const res = await fetch(`${BASE}${path}`, {
 		...init,
@@ -52,8 +55,36 @@ export async function cancelDeployment(opts: {
 	})
 }
 
-/** Trigger a deploy by POSTing to the hook URL — no auth needed */
+/**
+ * Trigger a deploy by POSTing to the hook URL.
+ * Validates the URL is a genuine Vercel hook before calling to prevent
+ * SSRF if a document is tampered with outside the Studio schema.
+ */
 export async function triggerDeploy(hookUrl: string): Promise<void> {
+	if (!VERCEL_HOOK_RE.test(hookUrl)) {
+		throw new Error('Invalid deploy hook URL — must be a Vercel hook (api.vercel.com/v1/integrations/deploy/…)')
+	}
 	const res = await fetch(hookUrl, { method: 'POST' })
 	if (!res.ok) throw new Error(`Deploy hook returned ${res.status}`)
 }
+
+/**
+ * Fetch build events for a deployment.
+ * Returns up to 100 events in reverse chronological order,
+ * filtered to lines with actual text content.
+ */
+export async function getDeploymentEvents(opts: {
+	deploymentId: string
+	token: string
+	teamId?: string
+}): Promise<DeploymentEvent[]> {
+	const params = new URLSearchParams({ limit: '100', direction: 'backward' })
+	if (opts.teamId) params.set('teamId', opts.teamId)
+	// API returns either a plain array or a wrapped object depending on version
+	const raw = await vercelFetch<DeploymentEvent[] | { events?: DeploymentEvent[] }>(
+		`/v2/deployments/${opts.deploymentId}/events?${params}`,
+		opts.token,
+	)
+	const events: DeploymentEvent[] = Array.isArray(raw) ? raw : (raw.events ?? [])
+	return events.filter(e => e.text?.trim())
+}

package/src/lib/helpers.ts

@@ -74,13 +74,30 @@ export function stateLabel(state: VercelDeployState | undefined): {
 	tone: 'positive' | 'caution' | 'critical' | 'default'
 } {
 	switch (state) {
-		case 'READY':       return { label: 'Ready',        tone: 'positive' }
-		case 'BUILDING':    return { label: 'Building',     tone: 'caution' }
-		case 'QUEUED':      return { label: 'Queued',       tone: 'caution' }
-		case 'INITIALIZING':return { label: 'Initializing', tone: 'caution' }
-		case 'ERROR':       return { label: 'Error',        tone: 'critical' }
-		case 'CANCELED':    return { label: 'Canceled',     tone: 'default' }
-		case 'LOADING':     return { label: 'Loading…',     tone: 'default' }
-		default:            return { label: 'Unknown',      tone: 'default' }
+		case 'READY':        return { label: 'Ready',        tone: 'positive' }
+		case 'BUILDING':     return { label: 'Building',     tone: 'caution' }
+		case 'QUEUED':       return { label: 'Queued',       tone: 'caution' }
+		case 'INITIALIZING': return { label: 'Initializing', tone: 'caution' }
+		case 'ERROR':        return { label: 'Error',        tone: 'critical' }
+		case 'CANCELED':     return { label: 'Canceled',     tone: 'default' }
+		case 'LOADING':      return { label: 'Loading…',     tone: 'default' }
+		default:             return { label: 'Unknown',      tone: 'default' }
+	}
+}
+
+/**
+ * Extracts the Vercel project dashboard URL from a deployment's inspectorUrl.
+ * inspectorUrl format: https://vercel.com/{team}/{project}/{deploymentId}
+ * Returns https://vercel.com/{team}/{project} or null if unparseable.
+ */
+export function projectHref(inspectorUrl: string | undefined): string | null {
+	if (!inspectorUrl) return null
+	try {
+		const { origin, pathname } = new URL(inspectorUrl)
+		const parts = pathname.split('/').filter(Boolean)
+		if (parts.length < 2) return null
+		return `${origin}/${parts[0]}/${parts[1]}`
+	} catch {
+		return null
 	}
 }

package/src/types.ts

@@ -45,9 +45,17 @@ export interface VercelDeployment {
 	}
 }
 
-/** Vercel secrets document stored at _id: 'secrets.vercelDeploy' */
-export interface VercelSecrets {
-	_id: 'secrets.vercelDeploy'
+/** A single build event returned by GET /v2/deployments/{id}/events */
+export interface DeploymentEvent {
+	type: 'command' | 'stdout' | 'stderr' | 'exit' | 'deployment-state'
+	text?: string
+	created: number
+	payload?: Record<string, unknown>
+}
+
+/** Vercel config document stored at _id: 'config.vercelDeploy' — readable by all authenticated users */
+export interface VercelConfig {
+	_id: 'config.vercelDeploy'
 	_type: 'vercelDeploy.config'
 	accessToken: string
 }