@kyro-cms/admin 0.9.1 → 0.9.2

package/src/hooks/useAutoFormState.ts

@@ -6,6 +6,7 @@ import { resolveUrl, fetchWithAuth } from "../lib/api";
 import { normalizeUploadFields } from "../lib/normalize-upload-fields";
 import { useUIStore } from "../lib/stores";
 import { resolveFieldValue } from "../lib/resolve-field-value";
+import { useQueue } from "./useQueue";
 
 interface UseAutoFormStateProps {
   config: Record<string, unknown>;
@@ -83,6 +84,9 @@ export function useAutoFormState({
   const lastAutoSaveTimeRef = useRef<number>(0);
   const autoSaveSkipRef = useRef<boolean>(false);
   const restorePromptedRef = useRef<string | null>(null);
+  const previousFormDataRef = useRef<string>("");
+  const astroSyncDataRef = useRef<string>("");
+  const { queueTask } = useQueue();
 
   const getDocumentKey = useCallback(
     (id?: string) => {
@@ -109,30 +113,6 @@ const persistBrowserDraft = useCallback(
     [lastSavedData.updatedAt, setDraftCache],
   );
 
-  const clearDraftArtifacts = useCallback(async () => {
-    const state = useAutoFormStore.getState();
-    const documentKey = getDocumentKey(state.formData.id);
-    if (documentKey) {
-      clearDraftCache(documentKey);
-    }
-
-    const draftUrl = globalSlug 
-      ? resolveUrl(`/api/globals/${globalSlug}/draft`)
-      : collectionSlug && state.formData.id 
-        ? resolveUrl(`/api/${collectionSlug}/${state.formData.id}/draft`)
-        : null;
-
-    if (draftUrl && versionsEnabled) {
-      try {
-        await fetchWithAuth(draftUrl, {
-          method: "DELETE",
-        });
-      } catch (err) {
-        console.error("Failed to clear draft snapshot:", err);
-      }
-    }
-  }, [clearDraftCache, collectionSlug, globalSlug, getDocumentKey]);
-
   const fetchVersions = useCallback(async () => {
     const url = globalSlug 
       ? resolveUrl(`/api/globals/${globalSlug}/versions`)
@@ -164,15 +144,15 @@ const persistBrowserDraft = useCallback(
     }
   }, [collectionSlug, getDocumentKey, persistBrowserDraft]);
 
-  const performServerAutoSave = useCallback(async (options?: { keepalive?: boolean }) => {
+  const doAutosaveFetch = useCallback(async (options?: { keepalive?: boolean }) => {
     const state = useAutoFormStore.getState();
     const latestFormData = state.formData;
     const currentLastSaved = state.lastSavedData;
-    
+
     if (autoSaveSkipRef.current || (!versionsEnabled && !!globalSlug)) return;
     if (!globalSlug && (!collectionSlug || !latestFormData.id)) return;
     if (!state.hasDirtyFields()) return;
-    
+
     const documentKey = getDocumentKey(latestFormData.id);
     if (documentKey) {
       persistBrowserDraft(documentKey, latestFormData);
@@ -185,72 +165,67 @@ const persistBrowserDraft = useCallback(
 
     setIsAutoSaving(true);
     setAutoSaveStatus("saving");
+    state.setBackgroundProcessing(true);
 
     try {
-      const draftUpdatedAt = new Date().toISOString();
-      const draftUrl = globalSlug 
-        ? resolveUrl(`/api/globals/${globalSlug}/draft`)
-        : resolveUrl(`/api/${collectionSlug}/${latestFormData.id}/draft`);
-
-      const delta = state.getDirtyData();
-      const idempotencyKey = `${documentKey || "global"}:${Date.now()}`;
-
-      const response = await fetchWithAuth(
-        draftUrl,
-        {
-          method: "PUT",
-          headers: { 
-            "Content-Type": "application/json",
-            "X-Idempotency-Key": idempotencyKey
-          },
-          keepalive: options?.keepalive,
-          body: JSON.stringify({
-            delta: normalizeUploadFields(delta),
-            baseUpdatedAt: currentLastSaved.updatedAt ?? null,
-            draftUpdatedAt,
-          }),
+      const url = globalSlug
+        ? resolveUrl(`/api/globals/${globalSlug}?autosave=true`)
+        : resolveUrl(`/api/${collectionSlug}/${latestFormData.id}?autosave=true`);
+
+      const response = await fetchWithAuth(url, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Draft": "true",
         },
-      );
+        keepalive: options?.keepalive,
+        body: JSON.stringify({
+          ...normalizeUploadFields(latestFormData),
+          baseUpdatedAt: currentLastSaved.updatedAt ?? null,
+        }),
+      });
 
       if (response.ok) {
-        const result = await response.json();
         lastAutoSaveTimeRef.current = Date.now();
         state.setRetryCount(0);
         state.setLastSavedAt(Date.now());
         if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
-        
+
         if (documentKey) {
           setDraftCache(documentKey, {
             data: latestFormData,
             baseUpdatedAt: currentLastSaved.updatedAt ?? null,
-            draftUpdatedAt: result.data?.draftUpdatedAt || draftUpdatedAt,
-            lastSyncedAt: result.data?.updatedAt || new Date().toISOString(),
+            draftUpdatedAt: new Date().toISOString(),
+            lastSyncedAt: (await response.clone().json()).data?.updatedAt || new Date().toISOString(),
           });
         }
         setAutoSaveStatus("success");
         setTimeout(() => {
-           if (useAutoFormStore.getState().autoSaveStatus === "success") {
-             setAutoSaveStatus("idle");
-           }
+          if (useAutoFormStore.getState().autoSaveStatus === "success") {
+            setAutoSaveStatus("idle");
+          }
         }, 2000);
+      } else if (response.status === 409) {
+        setAutoSaveStatus("conflict");
       } else {
         throw new Error(`Draft auto-save failed with status ${response.status}`);
       }
     } catch (err) {
       console.error("Auto-save failed:", err);
-      const state = useAutoFormStore.getState();
-      const currentRetryCount = state.retryCount;
+      const currentState = useAutoFormStore.getState();
+      const currentRetryCount = currentState.retryCount;
       if (currentRetryCount < 5) {
-        state.setRetryCount(currentRetryCount + 1);
+        currentState.setRetryCount(currentRetryCount + 1);
         setAutoSaveStatus("retrying");
         const delay = Math.min(1000 * Math.pow(2, currentRetryCount), 60000);
         if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
-        retryTimerRef.current = setTimeout(() => performServerAutoSave(options), delay);
+        retryTimerRef.current = setTimeout(() => performAutosave(options), delay);
       } else {
         setAutoSaveStatus("offline");
       }
     } finally {
       setIsAutoSaving(false);
+      useAutoFormStore.getState().setBackgroundProcessing(false);
     }
   }, [
     collectionSlug,
@@ -260,11 +235,25 @@ const persistBrowserDraft = useCallback(
     setAutoSaveStatus,
     setDraftCache,
     setIsAutoSaving,
-    versionsEnabled
+    versionsEnabled,
   ]);
 
-const saveDocument = useCallback(
-     async (dataOverride?: Record<string, unknown>) => {
+  const performAutosave = useCallback((options?: { keepalive?: boolean }) => {
+    queueTask(
+      () => doAutosaveFetch(options),
+      {
+        beforeProcess: () => {
+          return true;
+        },
+        afterProcess: () => {
+          // Background processing complete
+        },
+      },
+    );
+  }, [doAutosaveFetch, queueTask]);
+
+  const saveDocument = useCallback(
+     async (dataOverride?: Record<string, unknown>, isDraft = true) => {
       const state = useAutoFormStore.getState();
       const payload = dataOverride || state.formData;
       
@@ -276,7 +265,10 @@ const saveDocument = useCallback(
         url,
         {
           method: "PATCH",
-          headers: { "Content-Type": "application/json" },
+          headers: { 
+            "Content-Type": "application/json",
+            "X-Draft": String(isDraft),
+          },
           body: JSON.stringify({
             ...normalizeUploadFields(payload) as Record<string, unknown>,
             baseUpdatedAt: state.lastSavedData.updatedAt ?? null,
@@ -293,46 +285,6 @@ const saveDocument = useCallback(
     [collectionSlug, globalSlug, setAutoSaveStatus],
   );
 
-  const publishDocument = useCallback(async () => {
-    const state = useAutoFormStore.getState();
-    const url = globalSlug 
-      ? resolveUrl(`/api/globals/${globalSlug}/publish`)
-      : resolveUrl(`/api/${collectionSlug}/${state.formData.id}/publish`);
-
-    const response = await fetchWithAuth(
-      url,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          baseUpdatedAt: state.lastSavedData.updatedAt ?? null,
-        }),
-      },
-    );
-
-    if (response.status === 409) {
-      setAutoSaveStatus("conflict");
-    }
-
-    return response;
-  }, [collectionSlug, globalSlug, setAutoSaveStatus]);
-
-  const unpublishDocument = useCallback(async () => {
-    const state = useAutoFormStore.getState();
-    const url = globalSlug 
-      ? resolveUrl(`/api/globals/${globalSlug}/unpublish`)
-      : resolveUrl(`/api/${collectionSlug}/${state.formData.id}/unpublish`);
-
-    const response = await fetchWithAuth(
-      url,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-    return response;
-  }, [collectionSlug, globalSlug]);
-
   // Track sidebar toggle
   useEffect(() => {
     const handleToggle = () => {
@@ -346,14 +298,17 @@ const saveDocument = useCallback(
 
   // Initial data load
   const lastLoadedSlugRef = useRef<string | null>(null);
+  const lastInitialDataRef = useRef<string>("");
   const initialDataLoadedRef = useRef(false);
   useEffect(() => {
     const currentSlug = globalSlug || initialData?.id;
-    if (initialDataLoadedRef.current && lastLoadedSlugRef.current === currentSlug) return;
+    const serialized = JSON.stringify(initialData);
+    if (initialDataLoadedRef.current && lastLoadedSlugRef.current === currentSlug && lastInitialDataRef.current === serialized) return;
 
     loadDocument(initialData || {}, initialData || {});
     initialDataLoadedRef.current = true;
     lastLoadedSlugRef.current = currentSlug;
+    lastInitialDataRef.current = serialized;
   }, [collectionSlug, formData.id, globalSlug, initialData, loadDocument]);
 
   useEffect(() => {
@@ -368,33 +323,10 @@ const saveDocument = useCallback(
     const maybeRestoreDraft = async () => {
       if (!versionsEnabled) return;
       const browserDraft = getDraftCache(documentKey);
-      let serverDraft: Record<string, unknown> | null = null;
-
-try {
-         const response = await fetchWithAuth(
-           resolveUrl(`/api/${collectionSlug}/${initialData.id}/draft`),
-         );
-         if (response.ok) {
-           const result: { data?: Record<string, unknown> } = await response.json();
-           serverDraft = result.data || null;
-        }
-      } catch (err) {
-        console.error("Failed to fetch server draft:", err);
-      }
-
-const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
-         data: Record<string, unknown>;
-         draftUpdatedAt: string;
-       }>;
 
-      const candidate = drafts.sort(
-        (a, b) =>
-          new Date(b.draftUpdatedAt).getTime() -
-          new Date(a.draftUpdatedAt).getTime(),
-      )[0];
-
-      if (!candidate) return;
-      if (JSON.stringify(candidate.data) === JSON.stringify(initialData)) {
+      if (!browserDraft) return;
+      if (JSON.stringify(browserDraft.data) === JSON.stringify(initialData)) {
+        clearDraftCache(documentKey);
         return;
       }
 
@@ -409,20 +341,12 @@ const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
         onConfirm: async () => {
           if (cancelled) return;
           const currentFormData = useAutoFormStore.getState().formData;
-          const mergedData = { ...currentFormData, ...candidate.data };
+          const mergedData = { ...currentFormData, ...browserDraft.data };
           setFormData(mergedData);
           onActionSuccess?.("Recovered autosaved draft");
         },
         onCancel: async () => {
           clearDraftCache(documentKey);
-          try {
-            await fetchWithAuth(
-              resolveUrl(`/api/${collectionSlug}/${initialData.id}/draft`),
-              { method: "DELETE" },
-            );
-          } catch (err) {
-            console.error("Failed to discard server draft:", err);
-          }
         },
       });
     };
@@ -441,6 +365,7 @@ const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
     initialData,
     onActionSuccess,
     setFormData,
+    versionsEnabled,
   ]);
 
   // Recursively find a field by name inside tabs/group/collapsible
@@ -506,17 +431,22 @@ const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
 
     // Only schedule/reschedule on keystroke-originated changes
     if (getLastChangeSource() !== "keystroke") return;
-
-    // Reset source so subsequent non-keystroke changes don't re-schedule
     setChangeSource("other");
 
-    // Clear existing timers and start fresh
-    if (localSaveTimerRef.current) clearTimeout(localSaveTimerRef.current);
-    if (serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current);
+    // Compare serialized form data to avoid scheduling for unchanged metadata
+    const serialized = JSON.stringify(formData);
+    if (serialized === previousFormDataRef.current) return;
 
+    if (localSaveTimerRef.current) clearTimeout(localSaveTimerRef.current);
     localSaveTimerRef.current = setTimeout(performLocalAutoSave, 1500);
-    serverSaveTimerRef.current = setTimeout(performServerAutoSave, 8000);
-  }, [formData, sidebarCollapsed, collectionSlug, globalSlug, performLocalAutoSave, performServerAutoSave]);
+
+    // Queue autosave via the queue (debounced at 8s)
+    if (serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current);
+    serverSaveTimerRef.current = setTimeout(() => {
+      previousFormDataRef.current = serialized;
+      performAutosave();
+    }, 8000);
+  }, [formData, sidebarCollapsed, collectionSlug, globalSlug, performLocalAutoSave, performAutosave]);
 
   useEffect(() => {
     if (!globalSlug && (!collectionSlug || !formData.id)) return;
@@ -524,9 +454,8 @@ const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
     const flushDraft = () => {
       if (autoSaveSkipRef.current) return;
       const state = useAutoFormStore.getState();
-      // Only flush if there are actual unsaved changes
       if (!state.hasDirtyFields()) return;
-      void performServerAutoSave({ keepalive: true });
+      void performAutosave({ keepalive: true });
     };
 
     const handleVisibilityChange = () => {
@@ -561,13 +490,17 @@ const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
       window.removeEventListener("offline", handleOffline);
       document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
-  }, [collectionSlug, globalSlug, formData.id, performServerAutoSave]);
+  }, [collectionSlug, globalSlug, formData.id, performAutosave]);
 
-  // Astro sync
+  // Astro sync — avoid ping-pong loop with DetailView's setData
   useEffect(() => {
+    const serialized = JSON.stringify(formData);
+    if (serialized === astroSyncDataRef.current) return;
+    astroSyncDataRef.current = serialized;
+
     const hiddenInput = document.getElementById("form-data") as HTMLInputElement;
     if (hiddenInput) {
-      hiddenInput.value = JSON.stringify(formData);
+      hiddenInput.value = serialized;
     }
     onChange?.(formData);
   }, [formData, onChange]);
@@ -581,22 +514,17 @@ const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
   const documentStatus: 'draft' | 'published' | 'archived' | undefined = (() => {
     if (!formData.id && !globalSlug) return 'draft';
     if (!versionsEnabled) return 'published';
-    // If it has a pending draft version, effectively it's in a draft state for the editor
-    if (formData.hasDraft) return 'draft';
-    return formData.publishStatus || 'published';
+    return (formData.status as 'draft' | 'published' | undefined) || 'published';
   })();
 
   const hasUnpublishedChanges =
-    (!!formData.id || !!globalSlug) && (documentStatus !== 'published' || !!formData.hasDraft);
+    (!!formData.id || !!globalSlug) && documentStatus === 'draft';
 
   return {
     ...store,
     fetchVersions,
-    performAutoSave: performServerAutoSave,
+    performAutoSave: performAutosave,
     saveDocument,
-    publishDocument,
-    unpublishDocument,
-    clearDraftArtifacts,
     autoSaveSkipRef,
     lastAutoSaveTimeRef,
     documentStatus,

package/src/hooks/useQueue.ts

@@ -0,0 +1,60 @@
+import { useCallback, useRef } from "react";
+
+type QueuedFunction = () => Promise<void>;
+
+type QueueTaskOptions = {
+  afterProcess?: () => void;
+  beforeProcess?: () => boolean;
+};
+
+type QueueTask = (fn: QueuedFunction, options?: QueueTaskOptions) => void;
+
+/**
+ * A hook that queues async tasks for sequential execution.
+ * Only the last task in the queue is ever processed; all prior pending tasks are discarded.
+ * This prevents race conditions where multiple autosave fetches could run in parallel.
+ *
+ * Inspired by Payload's useQueues hook.
+ *
+ * @returns {queueTask} A function used to queue a task for execution.
+ */
+export function useQueue(): { queueTask: QueueTask } {
+  const queue = useRef<QueuedFunction[]>([]);
+  const isProcessing = useRef(false);
+
+  const queueTask = useCallback<QueueTask>((fn, options) => {
+    queue.current.push(fn);
+
+    async function processQueue() {
+      if (isProcessing.current) return;
+
+      if (typeof options?.beforeProcess === "function") {
+        const shouldContinue = options.beforeProcess();
+        if (shouldContinue === false) return;
+      }
+
+      while (queue.current.length > 0) {
+        const latestTask = queue.current.pop();
+        queue.current = [];
+
+        isProcessing.current = true;
+
+        try {
+          await latestTask();
+        } catch (err) {
+          console.error("Error in queued function:", err);
+        } finally {
+          isProcessing.current = false;
+
+          if (typeof options?.afterProcess === "function") {
+            options.afterProcess();
+          }
+        }
+      }
+    }
+
+    processQueue();
+  }, []);
+
+  return { queueTask };
+}

package/src/layouts/AdminLayout.astro

@@ -7,7 +7,7 @@ import { adminPath, apiPath } from "../lib/paths";
 import { AuthBridge } from "../components/AuthBridge";
 import { GlobalModal } from "../components/ui/GlobalModal";
 import { Toaster } from "../components/ui/Toaster";
-import { getSiteSettings } from "../lib/globals";
+import { getSiteSettings, getGlobal } from "../lib/globals";
 
 interface Props {
   title: string;
@@ -15,8 +15,25 @@ interface Props {
 
 const { title } = Astro.props;
 const siteSettings = await getSiteSettings({ request: Astro.request });
+const seoSettings = await getGlobal("seo-settings", { request: Astro.request });
+
 const siteName = siteSettings?.siteName || "Kyro CMS";
 const siteFavicon = siteSettings?.siteFavicon;
+const siteDescription = siteSettings?.siteDescription || "";
+
+// SEO Logic
+const seoMode = seoSettings?.seoMode || "simple";
+const includeSiteName = seoSettings?.siteNameInTitle ?? true;
+const titleSeparator = seoSettings?.separator || " - ";
+const defaultTitle = seoSettings?.defaultTitle || title;
+const defaultDescription = seoSettings?.defaultDescription || siteDescription;
+const canonicalUrl = seoMode === "advanced" ? seoSettings?.meta?.canonicalUrl : "";
+const robots = seoMode === "advanced" && seoSettings?.meta?.robots ? seoSettings.meta.robots : "noindex, nofollow";
+
+let displayTitle = title === "Dashboard" && defaultTitle !== "Dashboard" ? defaultTitle : title;
+if (includeSiteName) {
+  displayTitle = `${displayTitle}${titleSeparator}${siteName}`;
+}
 ---
 
 <!doctype html>
@@ -24,7 +41,10 @@ const siteFavicon = siteSettings?.siteFavicon;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{title} - {siteName}</title>
+    <title>{displayTitle}</title>
+    {defaultDescription && <meta name="description" content={defaultDescription} />}
+    {robots && <meta name="robots" content={robots} />}
+    {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
     <link
       rel="icon"
       type={siteFavicon?.mimeType || "image/svg+xml"}

package/src/layouts/AuthLayout.astro

@@ -1,12 +1,37 @@
 ---
 import "../styles/main.css";
 import { adminPath, apiPath } from "../lib/paths";
+import { getSiteSettings, getGlobal } from "../lib/globals";
 
 interface Props {
   title: string;
 }
 
 const { title } = Astro.props;
+const siteSettings = await getSiteSettings({ request: Astro.request });
+const seoSettings = await getGlobal("seo-settings", { request: Astro.request });
+
+const siteName = siteSettings?.siteName || "Kyro CMS";
+const siteFavicon = siteSettings?.siteFavicon;
+const siteLogo = siteSettings?.siteLogo;
+const logoWidth = siteSettings?.logo?.width;
+const logoHeight = siteSettings?.logo?.height;
+const logoAlt = siteSettings?.logo?.altText || siteName;
+const siteDescription = siteSettings?.siteDescription || "";
+
+// SEO Logic
+const seoMode = seoSettings?.seoMode || "simple";
+const includeSiteName = seoSettings?.siteNameInTitle ?? true;
+const titleSeparator = seoSettings?.separator || " - ";
+const defaultTitle = seoSettings?.defaultTitle || title;
+const defaultDescription = seoSettings?.defaultDescription || siteDescription;
+const canonicalUrl = seoMode === "advanced" ? seoSettings?.meta?.canonicalUrl : "";
+const robots = seoMode === "advanced" && seoSettings?.meta?.robots ? seoSettings.meta.robots : "noindex, nofollow";
+
+let displayTitle = title === "Login" && defaultTitle !== "Login" ? defaultTitle : title;
+if (includeSiteName) {
+  displayTitle = `${displayTitle}${titleSeparator}${siteName}`;
+}
 ---
 
 <!doctype html>
@@ -14,8 +39,15 @@ const { title } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{title} - Kyro CMS</title>
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{displayTitle}</title>
+    {defaultDescription && <meta name="description" content={defaultDescription} />}
+    {robots && <meta name="robots" content={robots} />}
+    {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
+    <link
+      rel="icon"
+      type={siteFavicon?.mimeType || "image/svg+xml"}
+      href={siteFavicon?.url || "/favicon.svg"}
+    />
     <script is:inline define:vars={{ adminPath, apiPath }}>
       (async () => {
         try {
@@ -50,22 +82,38 @@ const { title } = Astro.props;
         <!-- Logo -->
         <div class="w-full text-center mb-8">
           <a href="/" class="inline-flex items-center justify-center gap-2">
-            <svg class="w-7 h-7 text-[var(--kyro-text-primary)]" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-              <defs>
-                <mask id="kyro-cutout-auth">
-                  <rect width="100" height="100" fill="white" />
-                  <path d="M 40 89.72 L 40 40 L 89.72 40 A 45 45 0 0 1 40 89.72 Z" stroke="black" stroke-width="8" fill="none" />
-                </mask>
-              </defs>
-              <g mask="url(#kyro-cutout-auth)" fill="currentColor">
-                <circle cx="45" cy="45" r="45" />
-                <rect x="40" y="40" width="60" height="60" />
-              </g>
-            </svg>
-            <span
-              class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
-              >Kyro CMS</span
-            >
+            {
+              siteLogo ? (
+                <img
+                  src={siteLogo.url}
+                  alt={logoAlt}
+                  style={{
+                    width: logoWidth ? `${logoWidth}px` : "auto",
+                    height: logoHeight ? `${logoHeight}px` : "40px",
+                    objectFit: "contain",
+                  }}
+                  class="rounded-lg"
+                />
+              ) : (
+                <>
+                  <svg class="w-7 h-7 text-[var(--kyro-text-primary)]" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                      <mask id="kyro-cutout-auth">
+                        <rect width="100" height="100" fill="white" />
+                        <path d="M 40 89.72 L 40 40 L 89.72 40 A 45 45 0 0 1 40 89.72 Z" stroke="black" stroke-width="8" fill="none" />
+                      </mask>
+                    </defs>
+                    <g mask="url(#kyro-cutout-auth)" fill="currentColor">
+                      <circle cx="45" cy="45" r="45" />
+                      <rect x="40" y="40" width="60" height="60" />
+                    </g>
+                  </svg>
+                  <span class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
+                    {siteName}
+                  </span>
+                </>
+              )
+            }
           </a>
         </div>
 

package/src/lib/autoform-store.ts

@@ -92,8 +92,9 @@ interface AutoFormStore {
    compareSelected: string[];
    compareDiffs: VersionDiff[];
    loadingDiffs: boolean;
-   isAutoSaving: boolean;
-   autoSaveStatus: AutoSaveStatus;
+    isAutoSaving: boolean;
+    autoSaveStatus: AutoSaveStatus;
+    backgroundProcessing: boolean;
 
    // Auto-save
     lastAutoSaveTime: number;
@@ -125,6 +126,7 @@ interface AutoFormStore {
   setLoadingDiffs: (loading: boolean) => void;
   setIsAutoSaving: (saving: boolean) => void;
   setAutoSaveStatus: (status: AutoSaveStatus) => void;
+  setBackgroundProcessing: (processing: boolean) => void;
   setSidebarCollapsed: (collapsed: boolean) => void;
   setLastSavedAt: (time: number | null) => void;
   setRetryCount: (count: number) => void;
@@ -192,6 +194,7 @@ export const useAutoFormStore = create<AutoFormStore>()(
       loadingDiffs: false,
       isAutoSaving: false,
       autoSaveStatus: "idle" as AutoSaveStatus,
+      backgroundProcessing: false,
 
       // Auto-save state
       lastAutoSaveTime: 0,
@@ -293,6 +296,7 @@ setField: (field: string, value: unknown) => {
       setLoadingDiffs: (loading: boolean) => set({ loadingDiffs: loading }),
       setIsAutoSaving: (saving: boolean) => set({ isAutoSaving: saving }),
       setAutoSaveStatus: (status: AutoSaveStatus) => set({ autoSaveStatus: status }),
+      setBackgroundProcessing: (processing: boolean) => set({ backgroundProcessing: processing }),
       setSidebarCollapsed: (collapsed: boolean) =>
         set({ sidebarCollapsed: collapsed }),
       setLastSavedAt: (time: number | null) => set({ lastSavedAt: time }),