@kyro-cms/admin 0.12.3 → 0.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "engines": {
     "node": ">=22"
   },
@@ -128,4 +128,4 @@
     "type": "git",
     "url": "https://github.com/danielDozie/kyro-cms"
   }
-}
+}

package/src/components/DetailView.tsx

@@ -10,6 +10,7 @@ import { ActionBar, type DocumentStatus, type SaveStatus } from "./ActionBar";
 import { Spinner } from "./ui/Spinner";
 import { Shimmer } from "./ui/Shimmer";
 import { useUIStore, toast } from "../lib/stores";
+import { useAutoFormStore } from "../lib/autoform-store";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { SplitButton } from "./ui/SplitButton";
@@ -53,6 +54,10 @@ export function DetailView({
   const [updatedAt, setUpdatedAt] = useState<string | null>(null);
   const [publishedAt, setPublishedAt] = useState<string | null>(null);
   const [justSaved, setJustSaved] = useState(false);
+  const showPreview = useAutoFormStore((state) => state.showPreview);
+  const setShowPreview = useAutoFormStore((state) => state.setShowPreview);
+  const previewUrl = useAutoFormStore((state) => state.previewUrl);
+  const setPreviewUrl = useAutoFormStore((state) => state.setPreviewUrl);
 
   const fields = global?.fields || collection?.fields || [];
   const label = global?.label || collection?.label || "Document";
@@ -162,7 +167,12 @@ export function DetailView({
         setTimeout(() => {
           setSaveStatus("idle");
         }, 2000);
-      } catch {
+        
+        if (showPreview) {
+          refreshPreviewUrl(savedData);
+        }
+
+      } catch (e: any) {
         setSaveStatus("error");
         if (!isAutosave) {
           onError("Failed to save changes");
@@ -284,7 +294,37 @@ export function DetailView({
       }
     });
   };
+  const refreshPreviewUrl = async (docData: any = data) => {
+    try {
+      const endpoint = mode === "global" ? `/api/globals/${slug}/preview-url` : `/api/${slug}/preview-url`;
+      console.log("[Kyro Preview] Calling endpoint:", endpoint, "with data keys:", Object.keys(docData || {}), "documentId:", documentId);
+      const res = await apiPost(endpoint, { ...docData, id: documentId }, { autoToast: false });
+      console.log("[Kyro Preview] Response:", JSON.stringify(res));
+      if (res && (res as any).url) {
+        console.log("[Kyro Preview] Setting previewUrl:", (res as any).url);
+        setPreviewUrl((res as any).url);
+      } else {
+        console.warn("[Kyro Preview] No url in response:", res);
+      }
+    } catch (e: any) {
+      console.error("[Kyro Preview] Error:", e.message, e);
+      toast.error(e.message || "Failed to generate preview URL");
+    }
+  };
+
+  useEffect(() => {
+    if (showPreview) {
+      refreshPreviewUrl(data);
+    }
+  }, [showPreview]);
 
+  const togglePreview = () => {
+    const nextState = !showPreview;
+    setShowPreview(nextState);
+    if (nextState) {
+      refreshPreviewUrl(data);
+    }
+  };
   if (loading) {
     return (
       <div className="kyro-detail">
@@ -344,9 +384,7 @@ export function DetailView({
         onViewHistory={() => {
           window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
         }}
-        onPreview={() =>
-          window.open(`/preview/${slug}/${documentId}`, "_blank")
-        }
+        onPreview={togglePreview}
         onDelete={handleDeleteTrigger}
         onBack={onBack}
         onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
@@ -356,12 +394,14 @@ export function DetailView({
 
       <div
         className={
-          isSingleLayout
-            ? "w-full pt-4 md:pt-8"
-            : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 md:gap-8 pt-4 md:pt-0"
+          showPreview
+            ? "w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 pt-4 md:pt-0 h-[calc(100vh-140px)]"
+            : isSingleLayout
+              ? "w-full pt-4 md:pt-8"
+              : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 md:gap-8 pt-4 md:pt-0"
         }
       >
-        <div className="space-y-4 md:space-y-8 min-w-0">
+        <div className={`space-y-4 md:space-y-8 min-w-0 ${showPreview ? "overflow-y-auto pr-2 pb-20" : ""}`}>
           <div className="surface-tile p-4 md:p-8">
             <div className="flex items-center justify-between mb-8 px-1">
               <h2 className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
@@ -409,7 +449,37 @@ export function DetailView({
           </div>
         </div>
 
-        {!isSingleLayout && (
+        {showPreview && (
+          <div className="surface-tile flex flex-col overflow-hidden h-full border border-[var(--kyro-border)] rounded-xl animate-in fade-in slide-in-from-right-4 duration-500 shadow-xl bg-white dark:bg-black">
+            <div className="bg-[var(--kyro-surface-accent)] border-b border-[var(--kyro-border)] p-2 flex items-center justify-between shrink-0">
+              <div className="flex items-center gap-2 pl-2">
+                <div className="w-3 h-3 rounded-full bg-red-400/80"></div>
+                <div className="w-3 h-3 rounded-full bg-amber-400/80"></div>
+                <div className="w-3 h-3 rounded-full bg-green-400/80"></div>
+              </div>
+              <div className="text-[10px] font-mono opacity-50 truncate max-w-[60%] bg-[var(--kyro-bg)] px-3 py-1 rounded">
+                {previewUrl || "Generating preview URL..."}
+              </div>
+              <div className="w-16"></div>
+            </div>
+            <div className="flex-1 bg-white relative">
+              {!previewUrl ? (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Spinner className="w-6 h-6 text-[var(--kyro-primary)]" />
+                </div>
+              ) : (
+                <iframe
+                  src={previewUrl}
+                  className="w-full h-full border-0 bg-white"
+                  title="Preview"
+                  sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+                />
+              )}
+            </div>
+          </div>
+        )}
+
+        {!isSingleLayout && !showPreview && (
           <div className="space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
             <div className="surface-tile p-4 md:p-8">
               <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4 md:mb-6">
@@ -483,13 +553,15 @@ export function DetailView({
                 >
                   {isDuplicating ? "Duplicating..." : "Duplicate Document"}
                 </button>
-                <button
-                  type="button"
-                  onClick={() => window.open(`/preview/${slug}/${documentId}`, "_blank")}
-                  className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
-                >
-                  View Public Page
-                </button>
+                {previewUrl && (
+                  <button
+                    type="button"
+                    onClick={() => window.open(previewUrl, "_blank")}
+                    className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
+                  >
+                    Open Preview in New Tab
+                  </button>
+                )}
                 <button
                   type="button"
                   onClick={handleDeleteTrigger}

package/src/components/WebhookManager.tsx

@@ -17,6 +17,8 @@ import {
   ExternalLink,
   Zap,
   Shield,
+  Activity,
+  XCircle,
 } from "./ui/icons";
 import { useUIStore, toast } from "../lib/stores";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
@@ -52,14 +54,25 @@ interface WebhookItem {
   action?: string;
   config?: Record<string, string>;
   lastTriggered?: string;
+  lastError?: string;
+  createdAt: string;
+}
+
+interface WebhookDelivery {
+  id: string;
+  webhookId: string;
+  event: string;
+  status: "pending" | "success" | "failed" | "retrying";
+  responseStatus?: number;
+  responseBody?: string;
+  error?: string;
+  duration?: number;
   createdAt: string;
 }
 
 const ACTION_ICONS: Record<string, string> = {
   generic: "🔗",
-  "github-dispatch": "⚙️",
-  "dokploy-deploy": "🚀",
-  "coolify-deploy": "🎯",
+  "github-push": "⚙️",
 };
 
 export function WebhookManager() {
@@ -97,6 +110,11 @@ export function WebhookManager() {
   });
   const [createError, setCreateError] = useState("");
 
+  const [showHistoryModal, setShowHistoryModal] = useState(false);
+  const [selectedWebhookId, setSelectedWebhookId] = useState<string | null>(null);
+  const [deliveryHistory, setDeliveryHistory] = useState<WebhookDelivery[]>([]);
+  const [loadingHistory, setLoadingHistory] = useState(false);
+
   useEffect(() => {
     loadActions();
   }, []);
@@ -168,9 +186,10 @@ export function WebhookManager() {
       await create(formData);
       resetCreateModal();
       toast.success(`Webhook created: ${formData.name}`);
-    } catch (e) {
-      setCreateError("Failed to create webhook");
-      toast.error("Failed to create webhook");
+    } catch (e: any) {
+      const errorMsg = e.message || "Failed to create webhook";
+      setCreateError(errorMsg);
+      toast.error(errorMsg);
     }
   };
 
@@ -204,6 +223,21 @@ export function WebhookManager() {
     }
   };
 
+  const handleViewHistory = async (id: string) => {
+    setSelectedWebhookId(id);
+    setShowHistoryModal(true);
+    setLoadingHistory(true);
+    try {
+      const data = await apiGet<{ docs: WebhookDelivery[] }>(`/api/webhooks/${id}/history`);
+      setDeliveryHistory(data.docs || []);
+    } catch (e) {
+      console.error("Failed to load history:", e);
+      toast.error("Failed to load delivery history");
+    } finally {
+      setLoadingHistory(false);
+    }
+  };
+
   const eventOptions = [
     {
       label: "Create",
@@ -359,11 +393,29 @@ export function WebhookManager() {
                             ? `Last triggered ${new Date(webhook.lastTriggered).toLocaleDateString()}`
                             : "Never triggered"}
                         </div>
+                        {webhook.lastError && (
+                          <div className="text-[10px] text-red-500/80 flex items-center gap-1.5 mt-1">
+                            <XCircle className="w-3 h-3" />
+                            <span className="truncate max-w-[150px]" title={webhook.lastError}>
+                              {webhook.lastError}
+                            </span>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>
 
                   <div className="flex items-center gap-1.5 lg:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                    <button
+                      type="button"
+                      onClick={() => handleViewHistory(webhook.id)}
+                      className="p-2 rounded-lg border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-colors flex items-center gap-1.5"
+                      title="View delivery history"
+                    >
+                      <Activity className="w-3.5 h-3.5" />
+                      <span className="text-[11px] font-medium hidden sm:inline">History</span>
+                    </button>
+
                     <button
                       type="button"
                       onClick={() => handleTest(webhook.id)}
@@ -418,7 +470,7 @@ export function WebhookManager() {
                     type="button"
                     key={key}
                     onClick={() => handleActionSelect(key)}
-                    className="flex flex-col items-start p-4 rounded-xl border border-[var(--kyro-border)] bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)]/40 transition-all text-left group"
+                    className="flex flex-col items-start p-4 rounded-md border border-[var(--kyro-border)] bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)]/40 transition-all text-left group"
                   >
                     <div className="text-lg mb-2">{ACTION_ICONS[key] || "🔗"}</div>
                     <h3 className="text-sm font-medium mb-0.5 group-hover:text-[var(--kyro-primary)] transition-colors">
@@ -680,6 +732,81 @@ export function WebhookManager() {
           </button>
         </ModalActions>
       </Modal>
+
+      {/* History Modal */}
+      <Modal
+        open={showHistoryModal}
+        onClose={() => setShowHistoryModal(false)}
+        title="Delivery History"
+      >
+        <ModalContent>
+          <div className="space-y-4">
+            {loadingHistory ? (
+              <div className="flex items-center justify-center p-12 opacity-50">
+                <RefreshCw className="w-5 h-5 animate-spin text-[var(--kyro-primary)]" />
+              </div>
+            ) : deliveryHistory.length === 0 ? (
+              <div className="text-center p-8 text-[var(--kyro-text-secondary)] opacity-60 text-sm">
+                No delivery history available for this webhook.
+              </div>
+            ) : (
+              <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1">
+                {deliveryHistory.map((delivery) => (
+                  <div key={delivery.id} className="p-4 rounded-md border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-sm">
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-2">
+                        {delivery.status === "success" ? (
+                          <CheckCircle2 className="w-4 h-4 text-green-500" />
+                        ) : (
+                          <XCircle className="w-4 h-4 text-red-500" />
+                        )}
+                        <span className="font-medium">{delivery.event}</span>
+                      </div>
+                      <span className="text-[10px] text-[var(--kyro-text-secondary)] opacity-50">
+                        {new Date(delivery.createdAt).toLocaleString()}
+                      </span>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4 text-xs text-[var(--kyro-text-secondary)] mb-3">
+                      <div>
+                        <span className="opacity-50">Status: </span>
+                        <span className={`font-medium ${delivery.status === "success" ? "text-green-500" : "text-red-500"}`}>
+                          {delivery.responseStatus || delivery.status}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="opacity-50">Duration: </span>
+                        {delivery.duration ? `${delivery.duration}ms` : "-"}
+                      </div>
+                    </div>
+
+                    {delivery.error && (
+                      <div className="text-xs text-red-500 bg-red-500/5 p-2 rounded border border-red-500/10 font-mono break-all mb-2">
+                        {delivery.error}
+                      </div>
+                    )}
+
+                    {delivery.responseBody && (
+                      <div className="text-[10px] font-mono bg-[var(--kyro-bg)] p-2 rounded border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] opacity-70 max-h-24 overflow-y-auto break-all">
+                        {delivery.responseBody}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button
+            type="button"
+            onClick={() => setShowHistoryModal(false)}
+            className="w-full py-2.5 rounded-lg text-sm font-medium bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface)] transition-colors"
+          >
+            Close
+          </button>
+        </ModalActions>
+      </Modal>
     </div>
   );
 }

package/src/components/autoform/AutoFormEditView.tsx

@@ -15,7 +15,7 @@ export function AutoFormEditView({
   collectionSlug,
   renderField,
 }: AutoFormEditViewProps) {
-  const { showPreview, sidebarCollapsed, formData } = useAutoFormStore();
+  const { showPreview, sidebarCollapsed, formData, previewUrl } = useAutoFormStore();
 
   if (layout === "single") {
     return (
@@ -65,7 +65,7 @@ export function AutoFormEditView({
               </span>
             </div>
             <iframe
-              src={`/${collectionSlug}/${formData.slug || formData.id}?preview=true`}
+              src={previewUrl || ""}
               className="w-full h-full border-none"
               title="Live Preview"
             />

package/src/components/ui/PageHeader.tsx

@@ -96,13 +96,12 @@ function ActionsSlot({ actions }: { actions: NonNullable<PageHeaderProps["action
             type="button"
             onClick={act.onClick}
             disabled={act.disabled}
-            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${
-              act.variant === "outline"
-                ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-                : act.variant === "ghost"
+            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all ${act.variant === "outline"
+              ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              : act.variant === "ghost"
                 ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none"
                 : "kyro-btn-primary hover:opacity-90"
-            } ${act.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${act.className || ""}`}
+              } ${act.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${act.className || ""}`}
           >
             {act.icon && <act.icon className="w-4 h-4" />}
             {act.label}
@@ -120,7 +119,7 @@ function SingleAction({ action }: { action: NonNullable<PageHeaderProps["action"
       type="button"
       onClick={action.onClick}
       disabled={action.disabled}
-      className={`kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 w-full lg:w-auto justify-center ${action.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${action.className || ""}`}
+      className={`kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all w-full lg:w-auto justify-center ${action.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${action.className || ""}`}
     >
       {action.icon && <action.icon className="w-4 h-4" />}
       {action.label}

package/src/lib/autoform-store.ts

@@ -87,6 +87,7 @@ interface AutoFormStore {
    versions: Version[];
    loadingVersions: boolean;
    showPreview: boolean;
+   previewUrl: string | null;
    isMenuOpen: boolean;
    hasUnsavedChanges: boolean;
    loadingFields: Record<string, boolean>;
@@ -118,6 +119,7 @@ interface AutoFormStore {
   setVersions: (versions: Version[]) => void;
   setLoadingVersions: (loading: boolean) => void;
   setShowPreview: (show: boolean | ((prev: boolean) => boolean)) => void;
+  setPreviewUrl: (url: string | null) => void;
   setIsMenuOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
   setHasUnsavedChanges: (hasChanges: boolean) => void;
   setLoadingFields: (fields: Record<string, boolean> | ((prev: Record<string, boolean>) => Record<string, boolean>)) => void;
@@ -187,6 +189,7 @@ export const useAutoFormStore = create<AutoFormStore>()(
       versions: [],
       loadingVersions: false,
       showPreview: false,
+      previewUrl: null,
       isMenuOpen: false,
       hasUnsavedChanges: false,
       loadingFields: {},
@@ -275,6 +278,7 @@ export const useAutoFormStore = create<AutoFormStore>()(
           showPreview:
             typeof show === "function" ? show(state.showPreview) : show,
         })),
+      setPreviewUrl: (previewUrl) => set({ previewUrl }),
       setIsMenuOpen: (open) =>
         set((state) => ({
           isMenuOpen: typeof open === "function" ? open(state.isMenuOpen) : open,