@kyro-cms/admin 0.11.5 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.11.5",
+  "version": "0.12.0",
   "engines": {
     "node": ">=22"
   },

package/src/components/AutoForm.tsx

@@ -43,6 +43,7 @@ import { AutoFormHeader } from "./autoform/AutoFormHeader";
 import { AutoFormEditView } from "./autoform/AutoFormEditView";
 import { AutoFormVersionView } from "./autoform/AutoFormVersionView";
 import { AutoFormApiView } from "./autoform/AutoFormApiView";
+import { ErrorBoundary } from "./autoform/ErrorBoundary";
 
 interface AutoFormProps {
   config: CollectionConfig | GlobalConfig;
@@ -147,6 +148,7 @@ export function AutoForm({
     setAutoSaveStatus,
     fetchVersions,
     saveDocument,
+    forceSave,
     autoSaveSkipRef,
     lastAutoSaveTimeRef,
     documentStatus,
@@ -460,11 +462,14 @@ export function AutoForm({
       message: "Delete this document? This cannot be undone. Are you absolutely sure?",
       variant: "danger",
       onConfirm: async () => {
+        autoSaveSkipRef.current = true;
         try {
           await apiDelete(`/api/${collectionSlug}/${formData.id}`);
           window.location.href = `${ADMIN_BASE}/${collectionSlug}`;
         } catch (err) {
           toast.error((err as Error).message || "Failed to delete document");
+        } finally {
+          autoSaveSkipRef.current = false;
         }
       },
     });
@@ -475,6 +480,7 @@ export function AutoForm({
       title: "Unpublish Document",
       message: "Unpublish this document?",
       onConfirm: async () => {
+        autoSaveSkipRef.current = true;
         try {
           const response = await saveDocument(
             { ...formData, status: 'draft' } as Record<string, unknown>,
@@ -493,6 +499,8 @@ export function AutoForm({
           }
         } catch (err) {
           toast.error("Failed to unpublish");
+        } finally {
+          autoSaveSkipRef.current = false;
         }
       },
     });
@@ -533,7 +541,7 @@ export function AutoForm({
         );
         if (isPost) {
           setTimeout(() => {
-            window.location.href = `${ADMIN_BASE}/${collectionSlug}`;
+            window.location.href = `${ADMIN_BASE}/${collectionSlug}/${result.data.id}`;
           }, 800);
         }
       } else {
@@ -593,7 +601,22 @@ export function AutoForm({
       if (response?.ok) {
         setLocalSaveStatus("saved");
         onActionSuccess?.("Published successfully");
+        if (isNewDoc && !globalSlug && dataToPublish.id) {
+          setTimeout(() => {
+            window.location.href = `${ADMIN_BASE}/${collectionSlug}/${dataToPublish.id}`;
+          }, 800);
+        }
       } else {
+        // Two-step publish: if POST succeeded but PATCH failed,
+        // document exists as draft — navigate and inform user
+        if (isNewDoc && !globalSlug && dataToPublish.id) {
+          const error = await response?.json().catch(() => ({}));
+          toast.warning("Document saved as draft. Publishing failed: " + (error?.error || "Unknown error"));
+          setTimeout(() => {
+            window.location.href = `${ADMIN_BASE}/${collectionSlug}/${dataToPublish.id}`;
+          }, 1200);
+          return;
+        }
         const error = await response?.json().catch(() => ({}));
         if (response?.status === 409) setAutoSaveStatus("conflict");
         setLocalSaveStatus("error");
@@ -1012,7 +1035,9 @@ export function AutoForm({
           handleUnpublish={handleUnpublish}
           handleDelete={handleDelete}
           handlePublish={handlePublish}
+          handleSaveDraft={handleSaveDraft}
           handleSchedulePublish={handleSchedulePublish}
+          handleConflictOverride={() => forceSave()}
         />
       )}
       {layout === "single" && (
@@ -1068,7 +1093,9 @@ export function AutoForm({
             type="button"
             style={{ width: 0, height: 0, opacity: 0, padding: 0, margin: 0, border: 'none', position: 'absolute' }}
             onClick={async () => {
+              autoSaveSkipRef.current = true;
               try {
+                window.dispatchEvent(new Event("kyro:global-save-start"));
                 const response = await saveDocument(formData);
                 if (response.ok) {
                   const result = await response.json();
@@ -1080,33 +1107,38 @@ export function AutoForm({
               } catch (e) {
                 console.error("Save error exception:", e);
                 onActionError?.("Save failed: " + (e as Error).message);
+              } finally {
+                autoSaveSkipRef.current = false;
+                window.dispatchEvent(new Event("kyro:global-save-end"));
               }
             }}
           />
         </>
       )}
       <main className="w-full pt-6 md:pt-0">
-        {view === "edit" && (
-          <AutoFormEditView
-            config={config}
-            layout={layout}
-            collectionSlug={collectionSlug}
-            renderField={renderField}
-          />
-        )}
-        {view === "version" && (
-          <AutoFormVersionView
-            handleRestoreVersion={handleRestoreVersion}
-            handleCompareVersions={handleCompareVersions}
-            toggleCompareSelection={toggleCompareSelection}
-          />
-        )}
-        {view === "api" && (
-          <AutoFormApiView
-            collectionSlug={collectionSlug}
-            globalSlug={globalSlug}
-          />
-        )}
+        <ErrorBoundary>
+          {view === "edit" && (
+            <AutoFormEditView
+              config={config}
+              layout={layout}
+              collectionSlug={collectionSlug}
+              renderField={renderField}
+            />
+          )}
+          {view === "version" && (
+            <AutoFormVersionView
+              handleRestoreVersion={handleRestoreVersion}
+              handleCompareVersions={handleCompareVersions}
+              toggleCompareSelection={toggleCompareSelection}
+            />
+          )}
+          {view === "api" && (
+            <AutoFormApiView
+              collectionSlug={collectionSlug}
+              globalSlug={globalSlug}
+            />
+          )}
+        </ErrorBoundary>
       </main>
     </div>
   );

package/src/components/GraphQLPlayground.tsx

@@ -23,6 +23,7 @@ import {
   Play,
   Clock,
   Terminal,
+  Search,
 } from "./ui/icons";
 
 function ChevronDown({ className }: { className?: string }) {
@@ -246,14 +247,42 @@ function generateSkeletonQuery(field: FieldInfo, schema: SchemaInfo, isMutation:
   const returnTypeName = resolveTypeName(field.type);
   const returnType = schema.types.find((t) => t.name === returnTypeName);
 
-  function collectFields(fields: FieldInfo[], indent: number): string[] {
+  function buildTypeMap(): Map<string, TypeInfo> {
+    const m = new Map<string, TypeInfo>();
+    for (const t of schema.types) m.set(t.name, t);
+    return m;
+  }
+  const localTypeMap = buildTypeMap();
+
+  function collectFieldsWithUnions(fields: FieldInfo[], indent: number, _typeMap: Map<string, TypeInfo>): string[] {
     const lines: string[] = [];
     for (const f of fields) {
       if (f.isDeprecated) continue;
       const typeName = resolveTypeName(f.type);
+      const returnInfo = _typeMap.get(typeName);
       const pad = "  ".repeat(indent);
       if (isScalarType(typeName) || typeName === "JSON") {
         lines.push(`${pad}${f.name}`);
+      } else if (returnInfo && (returnInfo.kind === "UNION" || returnInfo.kind === "INTERFACE")) {
+        lines.push(`${pad}${f.name} {`);
+        lines.push(`${pad}  __typename`);
+        for (const pt of returnInfo.possibleTypes || []) {
+          const ptInfo = _typeMap.get(pt.name);
+          if (!ptInfo?.fields) continue;
+          lines.push(`${pad}  ... on ${pt.name} {`);
+          for (const pf of ptInfo.fields) {
+            if (pf.isDeprecated) continue;
+            const pfTypeName = resolveTypeName(pf.type);
+            const pfPad = "  ".repeat(indent + 2);
+            if (isScalarType(pfTypeName) || pfTypeName === "JSON") {
+              lines.push(`${pfPad}${pf.name}`);
+            } else {
+              lines.push(`${pfPad}${pf.name} { id }`);
+            }
+          }
+          lines.push(`${pad}  }`);
+        }
+        lines.push(`${pad}}`);
       } else {
         lines.push(`${pad}${f.name} { id }`);
       }
@@ -269,12 +298,12 @@ function generateSkeletonQuery(field: FieldInfo, schema: SchemaInfo, isMutation:
   if (docField && isMutation) {
     const docTypeName = resolveTypeName(docField.type);
     const docType = schema.types.find((t) => t.name === docTypeName);
-    const docLines = collectFields(docType?.fields?.filter((f) => !f.isDeprecated) || [], 1);
+    const docLines = collectFieldsWithUnions(docType?.fields?.filter((f) => !f.isDeprecated) || [], 1, localTypeMap);
     selection = ["  doc {", ...docLines, "  }"]
       .concat(messageField ? ["  message"] : [])
       .join("\n");
   } else {
-    selection = collectFields(returnType?.fields || [], 1).join("\n");
+    selection = collectFieldsWithUnions(returnType?.fields || [], 1, localTypeMap).join("\n");
   }
 
   const args = field.args
@@ -358,6 +387,8 @@ interface TypeInfo {
   fields?: FieldInfo[];
   inputFields?: FieldInfo[];
   enumValues?: { name: string; description?: string; isDeprecated: boolean }[];
+  possibleTypes?: { name: string; kind: string }[];
+  interfaces?: { name: string; kind: string }[];
   isDeprecated?: boolean;
 }
 
@@ -502,6 +533,8 @@ export function GraphQLPlayground({
                     description
                     isDeprecated
                   }
+                  possibleTypes { name kind }
+                  interfaces { name kind }
                 }
               }
             }
@@ -524,6 +557,93 @@ export function GraphQLPlayground({
     if (showDocs && !schema) fetchSchema();
   }, [showDocs, schema, fetchSchema]);
 
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const typeMap = useMemo(() => {
+    const m = new Map<string, TypeInfo>();
+    if (!schema) return m;
+    for (const t of schema.types) {
+      m.set(t.name, t);
+    }
+    return m;
+  }, [schema]);
+
+  interface SearchResult {
+    typeName: string;
+    fieldPath: string;
+    typeInfo: TypeInfo;
+    fieldInfo?: FieldInfo;
+  }
+
+  const searchResults = useMemo(() => {
+    if (!searchQuery.trim() || !schema) return [];
+    const q = searchQuery.toLowerCase();
+    const results: SearchResult[] = [];
+    const seenLabels = new Set<string>();
+
+    for (const type of schema.types) {
+      if (type.name.startsWith("__")) continue;
+      const typeMatch = type.name.toLowerCase().includes(q);
+
+      if (typeMatch && !seenLabels.has(type.name)) {
+        seenLabels.add(type.name);
+        results.push({ typeName: type.name, fieldPath: type.name, typeInfo: type });
+      }
+
+      if (type.fields) {
+        for (const field of type.fields) {
+          const fieldMatch = field.name.toLowerCase().includes(q);
+          if (fieldMatch) {
+            const label = `${type.name} > ${field.name}`;
+            if (!seenLabels.has(label)) {
+              seenLabels.add(label);
+              results.push({ typeName: type.name, fieldPath: label, typeInfo: type, fieldInfo: field });
+            }
+          }
+
+          if (q.length >= 2) {
+            const rtName = resolveTypeName(field.type);
+            const rt = typeMap.get(rtName);
+            if (rt?.fields && (fieldMatch || results.some(r => r.fieldInfo === field))) {
+              for (const sub of rt.fields) {
+                if (sub.name.toLowerCase().includes(q)) {
+                  const label = `${type.name} > ${field.name} > ${sub.name}`;
+                  if (!seenLabels.has(label)) {
+                    seenLabels.add(label);
+                    results.push({ typeName: type.name, fieldPath: label, typeInfo: type, fieldInfo: field });
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    return results;
+  }, [searchQuery, schema, typeMap]);
+
+  const handleSearchSelect = useCallback((result: SearchResult) => {
+    const targetType = result.fieldInfo
+      ? typeMap.get(resolveTypeName(result.fieldInfo.type)) || result.typeInfo
+      : result.typeInfo;
+    setSelectedType(targetType);
+    setSearchQuery("");
+  }, [typeMap]);
+
+  function highlightMatch(text: string, query: string) {
+    if (!query.trim()) return text;
+    const idx = text.toLowerCase().indexOf(query.toLowerCase());
+    if (idx === -1) return text;
+    return (
+      <>
+        {text.slice(0, idx)}
+        <mark className="bg-[var(--kyro-primary)]/20 text-[var(--kyro-primary)] rounded px-0.5">{text.slice(idx, idx + query.length)}</mark>
+        {text.slice(idx + query.length)}
+      </>
+    );
+  }
+
   const handleRun = useCallback(async () => {
     setIsLoading(true);
     setError(null);
@@ -850,9 +970,23 @@ export function GraphQLPlayground({
           <div className="flex-1 overflow-hidden">
             {rightTab === "docs" ? (
               <div className="h-full flex flex-col overflow-hidden bg-[var(--kyro-surface)]">
-                <div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--kyro-border)]">
-                  <span className="text-[10px] font-semibold text-[var(--kyro-text-secondary)]">Schema Explorer</span>
-                  <button onClick={() => setShowDocs(false)} className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]">
+                <div className="flex items-center gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)]">
+                  <div className="relative flex-1">
+                    <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[var(--kyro-text-muted)]" />
+                    <input
+                      type="text"
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      placeholder="Search types and fields..."
+                      className="w-full pl-7 pr-6 py-1 text-[10px] bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-md text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:border-[var(--kyro-primary)]"
+                    />
+                    {searchQuery && (
+                      <button onClick={() => setSearchQuery("")} className="absolute right-1.5 top-1/2 -translate-y-1/2 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]">
+                        <X className="w-3 h-3" />
+                      </button>
+                    )}
+                  </div>
+                  <button onClick={() => setShowDocs(false)} className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] shrink-0">
                     <X className="w-3.5 h-3.5" />
                   </button>
                 </div>
@@ -863,7 +997,39 @@ export function GraphQLPlayground({
                     </div>
                   ) : schema ? (
                     <div className="space-y-4">
-                      {selectedType ? (
+                      {searchQuery ? (
+                        <div className="space-y-1">
+                          {searchResults.length === 0 ? (
+                            <p className="text-[10px] text-[var(--kyro-text-muted)] py-4 text-center">No results for "{searchQuery}"</p>
+                          ) : (
+                            searchResults.map((r, i) => {
+                              const targetType = r.fieldInfo ? typeMap.get(resolveTypeName(r.fieldInfo.type)) || r.typeInfo : r.typeInfo;
+                              return (
+                                <button
+                                  key={r.fieldPath + i}
+                                  onClick={() => handleSearchSelect(r)}
+                                  className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left group"
+                                >
+                                  <span className="text-[10px] font-mono text-[var(--kyro-text-muted)]">
+                                    {r.fieldPath.split(" > ").map((part, j) => (
+                                      <span key={j}>
+                                        {j > 0 && <span className="mx-1 opacity-40">›</span>}
+                                        <span className={j === r.fieldPath.split(" > ").length - 1 ? "text-[var(--kyro-text-primary)] font-semibold" : "text-[var(--kyro-text-muted)]"}>
+                                          {highlightMatch(part, searchQuery)}
+                                        </span>
+                                      </span>
+                                    ))}
+                                    {targetType && (targetType.kind === "UNION" || targetType.kind === "INTERFACE") && (
+                                      <span className="ml-2 text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1 py-0.5 rounded">⧉</span>
+                                    )}
+                                  </span>
+                                  <ChevronRight className="w-3 h-3 opacity-30 group-hover:opacity-60" />
+                                </button>
+                              );
+                            })
+                          )}
+                        </div>
+                      ) : selectedType ? (
                         <div className="space-y-3">
                           <button
                             onClick={() => setSelectedType(null)}
@@ -878,6 +1044,46 @@ export function GraphQLPlayground({
                               <p className="mt-1.5 text-[11px] text-[var(--kyro-text-secondary)] leading-relaxed">{selectedType.description}</p>
                             )}
                           </div>
+                          {selectedType.kind === "UNION" && selectedType.possibleTypes && (
+                            <div className="space-y-2">
+                              <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">Possible Types <span className="text-[8px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1 py-0.5 rounded ml-1">⧉ fragment</span></h4>
+                              <div className="space-y-1">
+                                {selectedType.possibleTypes.map(pt => (
+                                  <button
+                                    key={pt.name}
+                                    onClick={() => {
+                                      const t = typeMap.get(pt.name);
+                                      if (t) setSelectedType(t);
+                                    }}
+                                    className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left group"
+                                  >
+                                    <span className="text-[11px] font-medium text-[var(--kyro-text-primary)]">{pt.name}</span>
+                                    <ChevronRight className="w-3 h-3 opacity-30 group-hover:opacity-60" />
+                                  </button>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+                          {selectedType.kind === "INTERFACE" && selectedType.possibleTypes && (
+                            <div className="space-y-2">
+                              <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">Implementing Types <span className="text-[8px] font-mono text-[var(--kyro-text-muted)] bg-[var(--kyro-surface)] px-1 py-0.5 rounded border border-[var(--kyro-border)] ml-1">interface</span></h4>
+                              <div className="space-y-1">
+                                {selectedType.possibleTypes.map(pt => (
+                                  <button
+                                    key={pt.name}
+                                    onClick={() => {
+                                      const t = typeMap.get(pt.name);
+                                      if (t) setSelectedType(t);
+                                    }}
+                                    className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left group"
+                                  >
+                                    <span className="text-[11px] font-medium text-[var(--kyro-text-primary)]">{pt.name}</span>
+                                    <ChevronRight className="w-3 h-3 opacity-30 group-hover:opacity-60" />
+                                  </button>
+                                ))}
+                              </div>
+                            </div>
+                          )}
                           {selectedType.fields && (
                             <div className="space-y-2">
                               <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">Fields</h4>
@@ -892,9 +1098,46 @@ export function GraphQLPlayground({
                                   >
                                     <div className="flex items-center justify-between gap-2">
                                       <span className="font-semibold text-[11px] text-[var(--kyro-text-primary)]">{f.name}</span>
-                                      <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
+                                      <span className="flex items-center gap-1">
+                                        {(() => {
+                                          const rtName = resolveTypeName(f.type);
+                                          const rt = typeMap.get(rtName);
+                                          const isUnionish = rt && (rt.kind === "UNION" || rt.kind === "INTERFACE");
+                                          return isUnionish ? (
+                                            <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded flex items-center gap-1">
+                                              ⧉
+                                              <span className="text-[8px] opacity-70">fragment</span>
+                                            </span>
+                                          ) : null;
+                                        })()}
+                                        <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
+                                      </span>
                                     </div>
                                     {f.description && <p className="text-[10px] text-[var(--kyro-text-secondary)] mt-1">{f.description}</p>}
+                                    {(() => {
+                                      const rtName = resolveTypeName(f.type);
+                                      const rt = typeMap.get(rtName);
+                                      if (rt && (rt.kind === "UNION" || rt.kind === "INTERFACE") && rt.possibleTypes?.length) {
+                                        return (
+                                          <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-primary)]/30 space-y-0.5">
+                                            <span className="text-[8px] font-semibold text-[var(--kyro-text-muted)] uppercase tracking-wider">Possible Types</span>
+                                            <div className="flex flex-wrap gap-1 mt-0.5">
+                                              {rt.possibleTypes.map(pt => {
+                                                const ptInfo = typeMap.get(pt.name);
+                                                const hasFragment = ptInfo && (ptInfo.kind === "OBJECT" || ptInfo.kind === "INTERFACE");
+                                                return (
+                                                  <span key={pt.name} className="text-[9px] font-mono text-[var(--kyro-text-muted)] bg-[var(--kyro-surface)] px-1.5 py-0.5 rounded border border-[var(--kyro-border)]">
+                                                    {pt.name}
+                                                    {hasFragment && <span className="ml-1 text-[8px] text-[var(--kyro-primary)]">⧉</span>}
+                                                  </span>
+                                                );
+                                              })}
+                                            </div>
+                                          </div>
+                                        );
+                                      }
+                                      return null;
+                                    })()}
                                     {f.args && f.args.length > 0 && (
                                       <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-border)] space-y-0.5">
                                         {f.args.map(a => (
@@ -934,14 +1177,18 @@ export function GraphQLPlayground({
                           </div>
                           <div className="space-y-1.5">
                             <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">All Types</h4>
-                            {schema.types.filter(t => !t.name.startsWith("__") && t.kind === "OBJECT").map(t => (
+                            {schema.types.filter(t => !t.name.startsWith("__") && (t.kind === "OBJECT" || t.kind === "UNION" || t.kind === "INTERFACE")).map(t => (
                               <button
                                 key={t.name}
                                 onClick={() => setSelectedType(t)}
-                                className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left"
+                                className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left group"
                               >
-                                <span className="text-[11px] font-medium text-[var(--kyro-text-primary)]">{t.name}</span>
-                                <ChevronRight className="w-3 h-3 opacity-30" />
+                                <div className="flex items-center gap-2">
+                                  <span className="text-[11px] font-medium text-[var(--kyro-text-primary)]">{t.name}</span>
+                                  {t.kind === "UNION" && <span className="text-[8px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1 py-0.5 rounded">union</span>}
+                                  {t.kind === "INTERFACE" && <span className="text-[8px] font-mono text-[var(--kyro-text-muted)] bg-[var(--kyro-surface)] px-1 py-0.5 rounded border border-[var(--kyro-border)]">interface</span>}
+                                </div>
+                                <ChevronRight className="w-3 h-3 opacity-30 group-hover:opacity-60" />
                               </button>
                             ))}
                           </div>

package/src/components/SessionsManager.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { apiGet, apiDelete } from "../lib/api";
 import { Shield, Monitor, Trash2, Clock, AlertTriangle, Info, LogOut, Globe, Activity, RefreshCcw, Smartphone, Laptop } from "./ui/icons";
 import { PageHeader } from "./ui/PageHeader";
-import toast from "react-hot-toast";
+import { toast } from "../lib/stores";
 import { Badge } from "./ui/Badge";
 
 interface Session {