@growth-labs/cms 0.8.7 → 0.8.14

package/src/ui/api-error.ts

@@ -0,0 +1,55 @@
+// Every admin route answers a failed zod parse the same way:
+//
+//   { error: 'Invalid request', details: { fieldErrors: { field: ['why'] }, formErrors: [...] } }
+//
+// The screens used to render only `error`, so an editor saw a bare
+// "Invalid request" and had no way to learn which field was wrong or why. That
+// stranded every video upload for over two hours when a source-URL rule started
+// refusing the share links editors had always pasted: the message that said
+// exactly what to change was in the response the whole time, unrendered.
+//
+// Read the field messages here, once, so every screen surfaces them.
+
+export interface ApiErrorBody {
+	error?: string
+	details?: {
+		fieldErrors?: Record<string, string[] | undefined>
+		formErrors?: string[]
+	}
+}
+
+const MAX_RENDERED_FIELD_MESSAGES = 4
+
+/**
+ * Build the message an editor should see from a failed admin-API response.
+ *
+ * Prefers the specific over the generic: field messages first (prefixed with
+ * their field so the editor knows where to look), then form-level messages,
+ * then the top-level `error`, then the caller's fallback. Never returns an
+ * empty string.
+ */
+export function apiErrorMessage(body: ApiErrorBody | null | undefined, fallback: string): string {
+	const top = typeof body?.error === 'string' ? body.error.trim() : ''
+	const details = body?.details
+
+	const fieldMessages: string[] = []
+	for (const [field, messages] of Object.entries(details?.fieldErrors ?? {})) {
+		for (const message of messages ?? []) {
+			const text = typeof message === 'string' ? message.trim() : ''
+			if (text) fieldMessages.push(`${field}: ${text}`)
+		}
+	}
+	for (const message of details?.formErrors ?? []) {
+		const text = typeof message === 'string' ? message.trim() : ''
+		if (text) fieldMessages.push(text)
+	}
+
+	if (fieldMessages.length === 0) return top || fallback
+
+	const shown = fieldMessages.slice(0, MAX_RENDERED_FIELD_MESSAGES)
+	const hidden = fieldMessages.length - shown.length
+	const detail = shown.join('; ') + (hidden > 0 ? ` (+${hidden} more)` : '')
+	// Keep the top-level text when it adds something beyond the generic prefix
+	// every zod failure shares.
+	return top && top !== 'Invalid request' ? `${top}: ${detail}` : detail
+}

package/src/ui/editor/ContentForm.tsx

@@ -23,6 +23,7 @@ import { type ContentMetadata, parseContentMetadata } from '../../engine/content
 import { countWords, estimateReadTime } from '../../engine/publisher.js'
 import type { ContentMetadataSelectField, PrimaryTopicControl } from '../../integration/options.js'
 import type { ContentStatus, ContentType, FrontsPublishStatus } from '../../schema/types.js'
+import { type ApiErrorBody, apiErrorMessage } from '../api-error.js'
 import { Icon } from '../icons.js'
 import { uploadMediaAsset } from '../screens/media-upload.js'
 import { AiAssistPanel } from './AiAssistPanel.js'
@@ -312,10 +313,8 @@ export function ContentForm({
 		try {
 			const res = await fetch(`/admin/api/content/${docId}`)
 			if (!res.ok) {
-				const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
-					error?: string
-				}
-				throw new Error(err.error ?? 'Could not load content')
+				const err = (await res.json().catch(() => ({ error: res.statusText }))) as ApiErrorBody
+				throw new Error(apiErrorMessage(err, 'Could not load content'))
 			}
 			const data = (await res.json()) as ExistingContentResponse
 			const next = contentResponseToFormState(data, contentType, docId)
@@ -381,10 +380,8 @@ export function ContentForm({
 					method: 'POST',
 				})
 				if (!res.ok) {
-					const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
-						error?: string
-					}
-					throw new Error(err.error ?? 'Foundry dispatch failed')
+					const err = (await res.json().catch(() => ({ error: res.statusText }))) as ApiErrorBody
+					throw new Error(apiErrorMessage(err, 'Foundry dispatch failed'))
 				}
 				queuedVideoSources.current.add(queueKey)
 				setForm((prev) => ({
@@ -434,13 +431,11 @@ export function ContentForm({
 						body: JSON.stringify(buildContentCreatePayload(contentType, draft)),
 					})
 					if (!res.ok) {
-						const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
-							error?: string
-						}
+						const err = (await res.json().catch(() => ({ error: res.statusText }))) as ApiErrorBody
 						setForm((prev) => ({
 							...prev,
 							saving: false,
-							saveError: err.error ?? 'Save failed',
+							saveError: apiErrorMessage(err, 'Save failed'),
 						}))
 						return
 					}
@@ -490,7 +485,7 @@ export function ContentForm({
 						setForm((prev) => ({
 							...prev,
 							saving: false,
-							saveError: err.error ?? 'Save failed',
+							saveError: apiErrorMessage(err, 'Save failed'),
 						}))
 						return
 					}

package/src/ui/editor/editor-media-upload.ts

@@ -1,3 +1,4 @@
+import { apiErrorMessage } from '../api-error.js'
 import { slugifyTitle } from './content-payload.js'
 
 type FetchLike = (url: string, init?: RequestInit) => Promise<Response>
@@ -17,7 +18,7 @@ export async function uploadEditorImage(
 	})
 	if (!res.ok) {
 		const err = (await res.json().catch(() => ({ error: res.statusText }))) as { error?: string }
-		throw new Error(err.error ?? 'Image upload failed')
+		throw new Error(apiErrorMessage(err, 'Image upload failed'))
 	}
 	const body = (await res.json()) as { url?: string; publicUrl?: string }
 	const url = body.url || body.publicUrl

package/src/ui/inspector/PublishTab.tsx

@@ -12,6 +12,7 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import type { ContentStatus } from '../../schema/types.js'
+import { apiErrorMessage } from '../api-error.js'
 import { Icon } from '../icons.js'
 import { Field } from './Field.js'
 import {
@@ -246,7 +247,7 @@ export function PublishTab({
 				const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
 					error?: string
 				}
-				throw new Error(err.error ?? 'Could not add author')
+				throw new Error(apiErrorMessage(err, 'Could not add author'))
 			}
 			const created = (await res.json()) as CreatedAuthorResponse
 			const nextAuthor = { id: created.id, name }

package/src/ui/screens/LibraryScreen.tsx

@@ -12,6 +12,7 @@
 
 import { useCallback, useEffect, useReducer, useRef, useState } from 'react'
 import type { ContentStatus, ContentType, FrontsPublishStatus } from '../../schema/types.js'
+import { apiErrorMessage } from '../api-error.js'
 import { buildSharePrefill, ShareModal } from '../components/ShareModal.js'
 import { Icon } from '../icons.js'
 import { useWorkspace } from '../workspace-context.js'
@@ -1139,7 +1140,7 @@ function BulkBar({
 				const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
 					error?: string
 				}
-				alert(`Bulk ${op} failed: ${err.error ?? res.statusText}`)
+				alert(`Bulk ${op} failed: ${apiErrorMessage(err, res.statusText)}`)
 				setBusy(false)
 				return
 			}
@@ -1241,7 +1242,7 @@ function ImportModal({
 				const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
 					error?: string
 				}
-				setError(err.error ?? 'Parse failed')
+				setError(apiErrorMessage(err, 'Parse failed'))
 				return
 			}
 			const data = (await res.json()) as ParseResult
@@ -1266,7 +1267,7 @@ function ImportModal({
 				const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
 					error?: string
 				}
-				setError(err.error ?? 'Confirm failed')
+				setError(apiErrorMessage(err, 'Confirm failed'))
 				setStep('preview')
 				return
 			}

package/src/ui/screens/SettingsScreen.tsx

@@ -24,6 +24,7 @@
 import { useCallback, useEffect, useReducer, useState } from 'react'
 import type { ApiKeyListEntry } from '../../engine/api-keys.js'
 import { WEBHOOK_EVENTS, type WebhookRecord } from '../../engine/webhooks.js'
+import { apiErrorMessage } from '../api-error.js'
 import { Icon } from '../icons.js'
 import { useWorkspace } from '../workspace-context.js'
 import {
@@ -552,7 +553,7 @@ function TeamSettings({ currentSubject }: { currentSubject: string | null }) {
 			const res = await fetch('/admin/api/settings/members')
 			if (!res.ok) {
 				const body = (await res.json().catch(() => ({}))) as { error?: string }
-				dispatch({ type: 'fetch-error', error: body.error ?? `HTTP ${res.status}` })
+				dispatch({ type: 'fetch-error', error: apiErrorMessage(body, `HTTP ${res.status}`) })
 				return
 			}
 			const body = (await res.json()) as {
@@ -600,7 +601,7 @@ function TeamSettings({ currentSubject }: { currentSubject: string | null }) {
 			})
 			if (!res.ok) {
 				const body = (await res.json().catch(() => ({}))) as { error?: string; reason?: string }
-				alert(body.reason ?? body.error ?? `Failed to change role (HTTP ${res.status})`)
+				alert(body.reason ?? apiErrorMessage(body, `Failed to change role (HTTP ${res.status})`))
 				return
 			}
 			dispatch({ type: 'update-role', userId, role: newRole })
@@ -629,7 +630,7 @@ function TeamSettings({ currentSubject }: { currentSubject: string | null }) {
 				error?: string
 			}
 			if (!res.ok) {
-				setInviteError(body.error ?? `HTTP ${res.status}`)
+				setInviteError(apiErrorMessage(body, `HTTP ${res.status}`))
 				return
 			}
 			setInviteSuccess(
@@ -905,7 +906,7 @@ function ApiSettings() {
 			const res = await fetch('/admin/api/settings/api-keys')
 			if (!res.ok) {
 				const body = (await res.json().catch(() => ({}))) as { error?: string }
-				dispatch({ type: 'fetch-error', error: body.error ?? `HTTP ${res.status}` })
+				dispatch({ type: 'fetch-error', error: apiErrorMessage(body, `HTTP ${res.status}`) })
 				return
 			}
 			const body = (await res.json()) as { apiKeys: ApiKeyListEntry[] }
@@ -937,7 +938,7 @@ function ApiSettings() {
 				error?: string
 			}
 			if (!res.ok) {
-				setCreateError(body.error ?? `HTTP ${res.status}`)
+				setCreateError(apiErrorMessage(body, `HTTP ${res.status}`))
 				return
 			}
 			// Show the one-time reveal modal
@@ -965,7 +966,7 @@ function ApiSettings() {
 				dispatch({ type: 'revoked', id })
 			} else {
 				const body = (await res.json().catch(() => ({}))) as { error?: string }
-				alert(body.error ?? `Failed to revoke (HTTP ${res.status})`)
+				alert(apiErrorMessage(body, `Failed to revoke (HTTP ${res.status})`))
 			}
 		} catch (err) {
 			alert(String(err))
@@ -1158,7 +1159,7 @@ function WebhooksSettings() {
 			const res = await fetch('/admin/api/settings/webhooks')
 			if (!res.ok) {
 				const body = (await res.json().catch(() => ({}))) as { error?: string }
-				dispatch({ type: 'fetch-error', error: body.error ?? `HTTP ${res.status}` })
+				dispatch({ type: 'fetch-error', error: apiErrorMessage(body, `HTTP ${res.status}`) })
 				return
 			}
 			const body = (await res.json()) as { webhooks: WebhookRecord[] }
@@ -1185,7 +1186,7 @@ function WebhooksSettings() {
 			})
 			const body = (await res.json().catch(() => ({}))) as { error?: string }
 			if (!res.ok) {
-				setCreateError(body.error ?? `HTTP ${res.status}`)
+				setCreateError(apiErrorMessage(body, `HTTP ${res.status}`))
 				return
 			}
 			setNewUrl('')
@@ -1206,7 +1207,7 @@ function WebhooksSettings() {
 			})
 			const body = (await res.json().catch(() => ({}))) as { error?: string }
 			if (!res.ok) {
-				alert(body.error ?? `Test failed (HTTP ${res.status})`)
+				alert(apiErrorMessage(body, `Test failed (HTTP ${res.status})`))
 				return
 			}
 			dispatch({ type: 'update-status', id, status: 'test' })
@@ -1228,7 +1229,7 @@ function WebhooksSettings() {
 				dispatch({ type: 'deleted', id })
 			} else {
 				const body = (await res.json().catch(() => ({}))) as { error?: string }
-				alert(body.error ?? `Failed to delete (HTTP ${res.status})`)
+				alert(apiErrorMessage(body, `Failed to delete (HTTP ${res.status})`))
 			}
 		} catch (err) {
 			alert(String(err))
@@ -1481,7 +1482,7 @@ function IntegrationsSettings() {
 			.then(async (res) => {
 				if (!res.ok) {
 					const body = (await res.json().catch(() => ({}))) as { error?: string }
-					setError(body.error ?? `HTTP ${res.status}`)
+					setError(apiErrorMessage(body, `HTTP ${res.status}`))
 					return
 				}
 				const body = (await res.json()) as IntegrationsData
@@ -1600,7 +1601,7 @@ function DomainsSettings() {
 			.then(async (res) => {
 				if (!res.ok) {
 					const body = (await res.json().catch(() => ({}))) as { error?: string }
-					setError(body.error ?? `HTTP ${res.status}`)
+					setError(apiErrorMessage(body, `HTTP ${res.status}`))
 					return
 				}
 				const body = (await res.json()) as DomainsData
@@ -1728,7 +1729,7 @@ export function SettingsScreen() {
 			})
 			if (!res.ok) {
 				const body = (await res.json().catch(() => ({}))) as { error?: string }
-				alert(body.error ?? `Failed to save settings (HTTP ${res.status})`)
+				alert(apiErrorMessage(body, `Failed to save settings (HTTP ${res.status})`))
 				return
 			}
 			// Re-fetch to ensure the UI is in sync with server state

package/src/ui/screens/TopicsScreen.tsx

@@ -30,6 +30,7 @@
 // confirm dialog. NO classes outside the broadsheet vocabulary.
 
 import { useCallback, useEffect, useReducer, useState } from 'react'
+import { apiErrorMessage } from '../api-error.js'
 import { Icon } from '../icons.js'
 import {
 	buildTopicCreateBody,
@@ -191,7 +192,7 @@ export function TopicsScreen() {
 				error?: string
 			}
 			if (!res.ok || !body.topic) {
-				setCreateError(body.error || `${res.status} ${res.statusText}`)
+				setCreateError(apiErrorMessage(body, `${res.status} ${res.statusText}`))
 				return
 			}
 			dispatchTopics({ type: 'create-ok', topic: body.topic })
@@ -219,7 +220,7 @@ export function TopicsScreen() {
 				error?: string
 			}
 			if (!res.ok || !body.topic) {
-				setRenameError(body.error || `${res.status} ${res.statusText}`)
+				setRenameError(apiErrorMessage(body, `${res.status} ${res.statusText}`))
 				return
 			}
 			dispatchTopics({ type: 'rename-ok', fromSlug: pendingRename.slug, topic: body.topic })

package/src/ui/screens/author-recovery.ts

@@ -1,3 +1,5 @@
+import { apiErrorMessage } from '../api-error.js'
+
 interface AuthorWriteFailureBody {
 	error?: string
 	errorClass?: string
@@ -17,7 +19,7 @@ export function formatAuthorWriteFailure(
 		body.author?.id ? `author id: ${body.author.id}` : '',
 		body.author?.slug ? `slug: ${body.author.slug}` : '',
 	].filter(Boolean)
-	const message = body.error || 'Author synchronization failed'
+	const message = apiErrorMessage(body, 'Author synchronization failed')
 	const classifiedMessage = message.includes(body.errorClass)
 		? message
 		: `${body.errorClass}: ${message}`

package/src/ui/screens/media-upload.ts

@@ -1,3 +1,4 @@
+import { type ApiErrorBody, apiErrorMessage } from '../api-error.js'
 export type MediaUploadKind = 'image' | 'video' | 'podcast'
 
 export interface MediaUploadResult {
@@ -97,9 +98,9 @@ async function readJson<T>(response: Response): Promise<T> {
 }
 
 async function assertOk<T>(response: Response, fallback: string): Promise<T> {
-	const body = await readJson<T & { error?: string }>(response)
+	const body = await readJson<T & ApiErrorBody>(response)
 	if (!response.ok) {
-		throw new Error(body.error || fallback)
+		throw new Error(apiErrorMessage(body, fallback))
 	}
 	return body
 }