@nuasite/cms 0.19.1 → 0.20.2

package/src/editor/api.ts

@@ -4,7 +4,6 @@ import { setAvailableTextStyles } from './text-styling'
 import type {
 	CmsManifest,
 	ComponentInsertOperation,
-	DeploymentStatusResponse,
 	SaveBatchRequest,
 	SaveBatchResponse,
 	UpdateMarkdownPageRequest,
@@ -20,68 +19,6 @@ export interface GetMarkdownContentResponse {
 	filePath: string
 }
 
-/**
- * Types for CMS AI chat communication (SSE events)
- */
-export interface CmsAiChatRequest {
-	prompt: string
-	elementId?: string
-	currentContent?: string
-	pageUrl: string
-	/** Source file context for the element being edited */
-	context?: string
-	sessionId?: string
-}
-
-export type CmsAiEvent =
-	| CmsAiTokenEvent
-	| CmsAiStatusEvent
-	| CmsAiActionEvent
-	| CmsAiErrorEvent
-	| CmsAiDoneEvent
-
-export interface CmsAiTokenEvent {
-	type: 'token'
-	token: string
-	fullText: string
-}
-
-export interface CmsAiStatusEvent {
-	type: 'status'
-	status: 'thinking' | 'coding' | 'building' | 'deploying' | 'complete'
-	message?: string
-}
-
-export interface CmsAiActionEvent {
-	type: 'action'
-	action: CmsAiAction
-}
-
-export type CmsAiAction =
-	| { name: 'refresh' }
-	| { name: 'preview'; url: string }
-	| { name: 'commit'; sha: string; message: string }
-	| { name: 'apply-edit'; elementId: string; content: string; htmlContent?: string }
-
-export interface CmsAiErrorEvent {
-	type: 'error'
-	error: string
-	code?: string
-}
-
-export interface CmsAiDoneEvent {
-	type: 'done'
-	summary?: string
-}
-
-export interface CmsAiStreamCallbacks {
-	onToken?: (token: string, fullText: string) => void
-	onStatus?: (status: CmsAiStatusEvent['status'], message?: string) => void
-	onAction?: (action: CmsAiAction) => void
-	onError?: (error: string, code?: string) => void
-	onDone?: (summary?: string) => void
-}
-
 /**
  * Get the manifest URL for the current page
  * For example: /about -> /about.json
@@ -325,194 +262,6 @@ export async function removeComponent(
 	return res.json()
 }
 
-/**
- * Parse SSE data line to event
- */
-export function parseSseEvent(data: string): CmsAiEvent | null {
-	if (data === '[DONE]') {
-		return { type: 'done' }
-	}
-	try {
-		return JSON.parse(data) as CmsAiEvent
-	} catch {
-		return null
-	}
-}
-
-/**
- * Stream AI chat response from the server using SSE
- * Provides rich events including status updates, actions (refresh, preview), and streaming tokens
- */
-export async function streamAiChat(
-	apiBase: string,
-	request: CmsAiChatRequest,
-	callbacks: CmsAiStreamCallbacks,
-	abortSignal?: AbortSignal,
-): Promise<void> {
-	const controller = new AbortController()
-	const timeoutId = setTimeout(() => controller.abort(), API.AI_STREAM_TIMEOUT_MS)
-
-	// Allow external abort signal to also abort the request
-	if (abortSignal) {
-		abortSignal.addEventListener('abort', () => controller.abort())
-	}
-
-	let doneCalled = false
-
-	try {
-		const res = await fetch(`${apiBase}/ai/chat`, {
-			method: 'POST',
-			credentials: 'include',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify(request),
-			signal: controller.signal,
-		})
-
-		if (!res.ok) {
-			const text = await res.text().catch(() => '')
-			callbacks.onError?.(text || `Request failed (${res.status})`, String(res.status))
-			return
-		}
-
-		if (!res.body) {
-			callbacks.onError?.('No response body')
-			return
-		}
-
-		const reader = res.body.getReader()
-		const decoder = new TextDecoder()
-		let buffer = ''
-
-		while (true) {
-			const { done, value } = await reader.read()
-
-			if (done) {
-				break
-			}
-
-			buffer += decoder.decode(value, { stream: true })
-			const lines = buffer.split('\n')
-
-			// Keep the last incomplete line in the buffer
-			buffer = lines.pop() || ''
-
-			for (const line of lines) {
-				if (line.startsWith('data: ')) {
-					const data = line.slice(6).trim()
-					if (!data) continue
-
-					const event = parseSseEvent(data)
-					if (!event) continue
-
-					switch (event.type) {
-						case 'token':
-							callbacks.onToken?.(event.token, event.fullText)
-							break
-						case 'status':
-							callbacks.onStatus?.(event.status, event.message)
-							break
-						case 'action':
-							callbacks.onAction?.(event.action)
-							break
-						case 'error':
-							callbacks.onError?.(event.error, event.code)
-							break
-						case 'done':
-							if (!doneCalled) {
-								doneCalled = true
-								callbacks.onDone?.(event.summary)
-							}
-							return
-					}
-				}
-			}
-		}
-
-		// Process any remaining buffer
-		if (buffer.startsWith('data: ')) {
-			const data = buffer.slice(6).trim()
-			if (data) {
-				const event = parseSseEvent(data)
-				if (event?.type === 'done' && !doneCalled) {
-					doneCalled = true
-					callbacks.onDone?.(event.summary)
-				}
-			}
-		}
-
-		if (!doneCalled) {
-			doneCalled = true
-			callbacks.onDone?.()
-		}
-	} catch (error) {
-		if (error instanceof Error && error.name === 'AbortError') {
-			callbacks.onError?.('Request timed out or was cancelled', 'TIMEOUT')
-			return
-		}
-		callbacks.onError?.(error instanceof Error ? error.message : 'Unknown error')
-	} finally {
-		clearTimeout(timeoutId)
-	}
-}
-
-/**
- * Chat message type from history endpoint
- */
-export interface ChatHistoryMessage {
-	id: string
-	role: 'user' | 'assistant' | 'tool'
-	content: string | null
-	created_at: string
-	channel?: string
-	identifier?: string
-}
-
-export interface ChatHistoryResponse {
-	messages: ChatHistoryMessage[]
-	hasMore: boolean
-}
-
-/**
- * Fetch AI chat history for the current project
- */
-export async function getChatHistory(
-	apiBase: string,
-	limit = 50,
-): Promise<ChatHistoryResponse> {
-	const res = await fetchWithTimeout(`${apiBase}/ai/chat/history?limit=${limit}`, {
-		method: 'GET',
-		credentials: 'include',
-	})
-
-	if (!res.ok) {
-		const text = await res.text().catch(() => '')
-		throw new Error(`Failed to fetch chat history (${res.status}): ${text || res.statusText}`)
-	}
-
-	return res.json()
-}
-
-/**
- * Fetch deployment status for the current project
- */
-export async function getDeploymentStatus(
-	apiBase: string,
-): Promise<DeploymentStatusResponse> {
-	const res = await fetchWithTimeout(`${apiBase}/deployment/status`, {
-		method: 'GET',
-		credentials: 'include',
-	})
-
-	if (!res.ok) {
-		const text = await res.text().catch(() => '')
-		throw new Error(`Failed to fetch deployment status (${res.status}): ${text || res.statusText}`)
-	}
-
-	return res.json()
-}
-
 /**
  * Fetch markdown content from a file
  */

package/src/editor/components/fields.tsx

@@ -83,18 +83,18 @@ export function ImageField({ label, value, placeholder, onChange, onBrowse, isDi
 	const hasImage = !!value && value.length > 0
 
 	return (
-		<div class="space-y-1.5">
+		<div class="space-y-1.5 min-w-0">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
 			{hasImage && (
 				<div
-					class="relative w-full h-24 rounded-cms-sm overflow-hidden bg-white/5 border border-white/10 cursor-pointer group"
+					class="relative w-full rounded-cms-sm overflow-hidden bg-white/5 border border-white/10 cursor-pointer group"
 					onClick={onBrowse}
 					data-cms-ui
 				>
 					<img
 						src={value}
 						alt={label}
-						class="w-full h-full object-cover"
+						class="w-full h-auto max-h-48"
 						onError={(e) => {
 							;(e.target as HTMLImageElement).style.display = 'none'
 						}}
@@ -104,14 +104,14 @@ export function ImageField({ label, value, placeholder, onChange, onBrowse, isDi
 					</div>
 				</div>
 			)}
-			<div class="flex gap-2">
+			<div class="flex gap-2 min-w-0">
 				<input
 					type="text"
 					value={value ?? ''}
 					placeholder={placeholder}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 					class={cn(
-						'flex-1 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
+						'flex-1 min-w-0 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
 						isDirty
 							? 'border-cms-primary focus:border-cms-primary focus:ring-cms-primary/30'
 							: 'border-white/20 focus:border-white/40 focus:ring-white/10',
@@ -121,7 +121,7 @@ export function ImageField({ label, value, placeholder, onChange, onBrowse, isDi
 				<button
 					type="button"
 					onClick={onBrowse}
-					class="px-3 py-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-cms-sm text-sm text-white transition-colors cursor-pointer"
+					class="shrink-0 px-3 py-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-cms-sm text-sm text-white transition-colors cursor-pointer"
 					data-cms-ui
 				>
 					Browse

package/src/editor/components/markdown-editor-overlay.tsx

@@ -3,7 +3,6 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { slugify } from '../../shared'
 import { updateMarkdownPage } from '../api'
 import { STORAGE_KEYS, Z_INDEX } from '../constants'
-import { startDeploymentPolling } from '../editor'
 import { createMarkdownPage } from '../markdown-api'
 import {
 	config,
@@ -50,6 +49,7 @@ export function MarkdownEditorOverlay() {
 	// Preview mode state
 	const [isPreview, setIsPreview] = useState(false)
 	const originalHTMLRef = useRef<string | null>(null)
+	const previewTargetRef = useRef<HTMLElement | null>(null)
 	const editorInstanceRef = useRef<Editor | null>(null)
 
 	useEffect(() => {
@@ -58,23 +58,34 @@ export function MarkdownEditorOverlay() {
 		}
 	}, [isCreateMode, isDataCollection])
 
-	const handleDeploymentComplete = useCallback(
-		(status: 'completed' | 'failed' | 'timeout') => {
-			if (status === 'failed') {
-				showToast('Deployment failed', 'error')
-			}
-		},
-		[],
-	)
+	// Auto-generate slug from title in create mode (unless user manually edited the slug)
+	useEffect(() => {
+		if (!isCreateMode || slugManuallyEdited) return
+		const title = (page?.frontmatter.title as string) || (page?.frontmatter.name as string) || ''
+		if (!title) return
+		markdownEditorState.value = {
+			...markdownEditorState.value,
+			currentPage: markdownEditorState.value.currentPage
+				? { ...markdownEditorState.value.currentPage, slug: slugify(title), isDirty: true }
+				: null,
+		}
+	}, [isCreateMode, slugManuallyEdited, page?.frontmatter.title, page?.frontmatter.name])
+
+	/** Find the [data-cms-markdown] wrapper element on the actual page (not CMS UI). */
+	const findMarkdownWrapper = useCallback((): HTMLElement | null => {
+		const SKIP_TAGS = new Set(['BODY', 'HTML', 'BUTTON', 'SPAN', 'A'])
+		const candidates = document.querySelectorAll('[data-cms-markdown]:not([data-cms-ui])')
+		for (const c of candidates) {
+			if (!SKIP_TAGS.has(c.tagName)) return c as HTMLElement
+		}
+		return null
+	}, [])
 
 	const restoreOriginalHTML = useCallback(() => {
-		const activeId = markdownEditorState.value.activeElementId
-		if (originalHTMLRef.current !== null && activeId) {
-			const el = document.querySelector(`[data-cms-id="${activeId}"]`)
-			if (el) {
-				el.innerHTML = originalHTMLRef.current
-			}
+		if (originalHTMLRef.current !== null && previewTargetRef.current) {
+			previewTargetRef.current.innerHTML = originalHTMLRef.current
 			originalHTMLRef.current = null
+			previewTargetRef.current = null
 		}
 	}, [])
 
@@ -95,11 +106,8 @@ export function MarkdownEditorOverlay() {
 				if (result.success) {
 					// Keep the preview HTML in place so user sees changes immediately
 					// If not in preview mode, inject editor HTML into the page element
-					const activeId = markdownEditorState.value.activeElementId
-					if (activeId && editorInstanceRef.current && !isPreview) {
-						const el = document.querySelector(
-							`[data-cms-id="${activeId}"]`,
-						)
+					if (editorInstanceRef.current && !isPreview) {
+						const el = findMarkdownWrapper()
 						if (el) {
 							try {
 								const view = editorInstanceRef.current.ctx.get(editorViewCtx)
@@ -115,14 +123,10 @@ export function MarkdownEditorOverlay() {
 					isMarkdownPreview.value = false
 					setIsSaving(false)
 
-					showToast('Content saved, deploying...', 'success')
+					showToast('Content saved', 'success')
 					// Clear pending entry navigation so editor doesn't auto-open after save
 					sessionStorage.removeItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION)
-					// Close the editor immediately — the toolbar will show deploying state
 					resetMarkdownEditorState()
-					startDeploymentPolling(config.value, {
-						onComplete: handleDeploymentComplete,
-					})
 				} else {
 					showToast(result.error || 'Failed to save markdown', 'error')
 					setIsSaving(false)
@@ -133,7 +137,7 @@ export function MarkdownEditorOverlay() {
 				setIsSaving(false)
 			}
 		},
-		[isSaving, isPreview, handleDeploymentComplete],
+		[isSaving, isPreview, findMarkdownWrapper],
 	)
 
 	const handleCreate = useCallback(async () => {
@@ -189,16 +193,11 @@ export function MarkdownEditorOverlay() {
 					}
 				}
 
-				showToast('Page created, deploying...', 'success')
+				showToast('Page created', 'success')
 				resetMarkdownEditorState()
-				startDeploymentPolling(config.value, {
-					onComplete: (status) => {
-						handleDeploymentComplete(status)
-						if (status === 'completed' && redirectUrl) {
-							startRedirectCountdown(redirectUrl, title.trim())
-						}
-					},
-				})
+				if (redirectUrl) {
+					startRedirectCountdown(redirectUrl, title.trim())
+				}
 			} else {
 				showToast(result.error || 'Failed to create page', 'error')
 			}
@@ -208,26 +207,28 @@ export function MarkdownEditorOverlay() {
 		} finally {
 			setIsSaving(false)
 		}
-	}, [isSaving, handleDeploymentComplete])
+	}, [isSaving])
 
 	const handlePreview = useCallback(() => {
 		const activeId = markdownEditorState.value.activeElementId
 		if (!editorInstanceRef.current || !activeId) return
 
 		if (!isPreview) {
-			// Enter preview
-			const el = document.querySelector(`[data-cms-id="${activeId}"]`)
+			// Enter preview — inject editor HTML into the markdown wrapper element.
+			const el = findMarkdownWrapper()
 			if (!el) {
 				showToast('Could not find page element to preview', 'error')
 				return
 			}
 			originalHTMLRef.current = el.innerHTML
+			previewTargetRef.current = el
 			try {
 				const view = editorInstanceRef.current.ctx.get(editorViewCtx)
 				el.innerHTML = view.dom.innerHTML
 			} catch (error) {
 				console.error('Failed to get editor HTML for preview:', error)
 				originalHTMLRef.current = null
+				previewTargetRef.current = null
 				showToast('Failed to generate preview', 'error')
 				return
 			}
@@ -239,7 +240,7 @@ export function MarkdownEditorOverlay() {
 			setIsPreview(false)
 			isMarkdownPreview.value = false
 		}
-	}, [isPreview, restoreOriginalHTML])
+	}, [isPreview, restoreOriginalHTML, findMarkdownWrapper])
 
 	const handleCancel = useCallback(() => {
 		restoreOriginalHTML()
@@ -326,8 +327,8 @@ export function MarkdownEditorOverlay() {
 			>
 				{/* Header */}
 				<div class="flex items-center justify-between px-5 py-4 border-b border-white/10">
-					<div class="flex items-center gap-3">
-						<div class="flex items-center text-white">
+					<div class="flex items-center gap-3 flex-1 min-w-0">
+						<div class="flex items-center text-white shrink-0">
 							<svg
 								width="20"
 								height="20"
@@ -345,36 +346,11 @@ export function MarkdownEditorOverlay() {
 								<line x1="10" y1="9" x2="8" y2="9" />
 							</svg>
 						</div>
-						<div>
-							<input
-								type="text"
-								value={(page.frontmatter.title as string) || (page.frontmatter.name as string) || ''}
-								placeholder={isDataCollection ? 'Entry name...' : 'Page title...'}
-								onInput={(e) => {
-									const title = (e.target as HTMLInputElement).value
-									// Data collections may use 'name' instead of 'title'
-									const titleField = isDataCollection && !('title' in page.frontmatter) && 'name' in page.frontmatter ? 'name' : 'title'
-									updateMarkdownFrontmatter({ [titleField]: title })
-									// Auto-generate slug in create mode if not manually edited
-									if (isCreateMode && !slugManuallyEdited) {
-										markdownEditorState.value = {
-											...markdownEditorState.value,
-											currentPage: markdownEditorState.value.currentPage
-												? {
-													...markdownEditorState.value.currentPage,
-													slug: slugify(title),
-													isDirty: true,
-												}
-												: null,
-										}
-									}
-								}}
-								class="text-base font-semibold text-white m-0 bg-transparent border-none outline-none placeholder-white/40 w-64"
-								data-cms-ui
-							/>
-						</div>
+						<span class="text-base font-semibold text-white truncate">
+							{(page.frontmatter.title as string) || (page.frontmatter.name as string) || (isDataCollection ? 'Entry name' : 'Page title')}
+						</span>
 					</div>
-					<div class="flex items-center gap-2">
+					<div class="flex items-center gap-2 shrink-0">
 						{!isDataCollection && (
 							<button
 								type="button"