@kyro-cms/admin 0.12.6 → 0.12.8

package/src/components/DetailView.tsx

@@ -14,6 +14,8 @@ import { useAutoFormStore } from "../lib/autoform-store";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { SplitButton } from "./ui/SplitButton";
+import { Lock, FileText, ChevronLeft, Save } from "lucide-react";
+import { navigate } from "astro:transitions/client";
 import { useTranslation } from "react-i18next";
 import "../lib/i18n";
 import { adminPath } from "../lib/paths";
@@ -231,9 +233,9 @@ export function DetailView({
       const response = await apiPost(`/api/${slug}/${documentId}/duplicate`, undefined, { autoToast: false }) as { data?: { id?: string } };
       toast.success(t("toast.duplicated", { defaultValue: "Document duplicated" }));
       if (response?.data?.id) {
-        window.location.href = `${adminPath}/${slug}/${response.data.id}`;
+        navigate(`${adminPath}/${slug}/${response.data.id}`);
       } else {
-        window.location.href = `${adminPath}/${slug}`;
+        navigate(`${adminPath}/${slug}`);
       }
     } catch (e) {
       toast.error((e as Error).message || t("toast.duplicateError", { defaultValue: "Failed to duplicate document" }));
@@ -290,7 +292,7 @@ export function DetailView({
         try {
           setIsDeleting(true);
           await apiDelete(`/api/${slug}/${documentId}`);
-          window.location.href = `${adminPath}/${slug}`;
+          navigate(`${adminPath}/${slug}`);
         } catch (e) {
           setIsDeleting(false);
         }

package/src/components/FieldRenderer.tsx

@@ -1,5 +1,17 @@
 import React from "react";
-import type { Field } from "@kyro-cms/core/client";
+import type {
+  Field,
+  TextField as TextFieldType,
+  NumberField as NumberFieldType,
+  CheckboxField as CheckboxFieldType,
+  SelectField as SelectFieldType,
+  DateField as DateFieldType,
+  CodeField as CodeFieldType,
+  UploadField as UploadFieldType,
+  RelationshipField as RelationshipFieldType,
+  BlocksField as BlocksFieldType,
+  MarkdownField as MarkdownFieldType,
+} from "@kyro-cms/core/client";
 import { UploadField } from "./fields/UploadField";
 import { CodeField } from "./fields";
 import NumberField from "./fields/NumberField";
@@ -22,8 +34,8 @@ import { setChangeSource } from "../lib/change-source";
 
 interface FieldRendererProps {
   field: Field;
-  value: any;
-  onChange: (value: any) => void;
+  value: unknown;
+  onChange: (value: unknown) => void;
   error?: string;
   disabled?: boolean;
   formData?: Record<string, unknown>;
@@ -56,9 +68,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "url":
       return (
         <TextField
-          field={field as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={field as TextFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           error={error}
           disabled={disabled}
         />
@@ -67,8 +79,8 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <IconField
           field={field as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           error={error}
           disabled={disabled}
         />
@@ -76,9 +88,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "textarea":
       return (
         <TextField
-          field={{ ...field, variant: "textarea" } as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={{ ...field, variant: "textarea" } as TextFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           error={error}
           disabled={disabled}
         />
@@ -86,9 +98,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "password":
       return (
         <TextField
-          field={{ ...field, variant: "password" } as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={{ ...field, variant: "password" } as TextFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           error={error}
           disabled={disabled}
         />
@@ -97,7 +109,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <SecretField
           field={field as any}
-          value={value as string | null | undefined}
+          value={(value as string) ?? undefined}
           onChange={onChange as (value: string) => void}
           error={error}
           disabled={disabled}
@@ -106,9 +118,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "number":
       return (
         <NumberField
-          field={field as any}
-          value={value}
-          onChange={onChange}
+          field={field as NumberFieldType}
+          value={(value as number) ?? undefined}
+          onChange={onChange as (value: number | undefined) => void}
           disabled={disabled}
           error={error}
         />
@@ -116,9 +128,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "checkbox":
       return (
         <CheckboxField
-          field={field as any}
-          value={value}
-          onChange={onChange}
+          field={field as CheckboxFieldType}
+          value={value as boolean}
+          onChange={onChange as (value: boolean) => void}
           disabled={disabled}
           error={error}
         />
@@ -126,9 +138,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "select":
       return (
         <SelectField
-          field={field as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={field as SelectFieldType}
+          value={(value as string | string[]) ?? undefined}
+          onChange={onChangeKeystroke as (value: string | string[] | undefined) => void}
           error={error}
           disabled={disabled}
           formData={formData}
@@ -140,9 +152,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "date":
       return (
         <DateField
-          field={field as any}
-          value={value}
-          onChange={onChange}
+          field={field as DateFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChange as (value: string | undefined) => void}
           disabled={disabled}
           error={error}
         />
@@ -151,7 +163,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <RichTextField
           field={field}
-          value={value}
+          value={value as Record<string, any> | null}
           onChange={onChangeKeystroke}
           disabled={disabled}
           error={error}
@@ -160,9 +172,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "markdown":
       return (
         <MarkdownField
-          field={field as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={field as MarkdownFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           disabled={disabled}
           error={error}
         />
@@ -170,9 +182,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "code":
       return (
         <CodeField
-          field={field as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={field as CodeFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           disabled={disabled}
           error={error}
         />
@@ -182,9 +194,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <FieldLayout field={field} error={error}>
           <UploadField
-            field={field as any}
-            value={value}
-            onChange={onChange}
+            field={field as UploadFieldType}
+            value={value as Record<string, unknown> | Record<string, unknown>[] | null}
+            onChange={onChange as (value: Record<string, unknown> | Record<string, unknown>[] | null) => void}
             disabled={disabled}
           />
         </FieldLayout>
@@ -192,7 +204,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "relationship":
       return (
         <RelationshipField
-          field={field as any}
+          field={field as unknown as { name: string; label?: string; relationTo: string | string[]; hasMany?: boolean; required?: boolean; admin?: { description?: string; readOnly?: boolean; placeholder?: string; } }}
           value={value}
           onChange={onChange}
           disabled={disabled}
@@ -203,8 +215,8 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <FieldLayout field={field} error={error}>
           <ListField
-            items={Array.isArray(value) ? value : []}
-            onChange={onChange}
+            items={Array.isArray(value) ? (value as string[]) : []}
+            onChange={onChange as (items: string[]) => void}
             compact
           />
         </FieldLayout>
@@ -213,8 +225,8 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <ArrayLayout
           field={field}
-          value={Array.isArray(value) ? value : []}
-          onChange={onChange}
+          value={Array.isArray(value) ? (value as unknown[]) : []}
+          onChange={onChange as (value: unknown[]) => void}
           disabled={disabled}
           renderField={(nestedField, parentData, onNestedChange) => {
             const nestedValue = parentData[nestedField.name];
@@ -239,8 +251,8 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "blocks":
       return (
         <BlocksField
-          field={field as any}
-          value={value}
+          field={field as BlocksFieldType}
+          value={value as unknown[]}
           onChange={onChangeKeystroke}
           disabled={disabled}
           error={error}
@@ -251,7 +263,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
         <GroupLayout
           field={field}
           value={value as Record<string, unknown> | null}
-          onChange={onChange}
+          onChange={onChange as (value: Record<string, unknown>) => void}
           renderField={(nestedField, parentData, onNestedChange) => {
             const nestedValue = parentData[nestedField.name];
             return (
@@ -280,7 +292,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
           <div className="flex items-center gap-3">
             <input
               type="color"
-              value={value || "#000000"}
+              value={(value as string) || "#000000"}
               onChange={(e) => onChange(e.target.value)}
               disabled={disabled}
               className="h-10 w-14 p-1 cursor-pointer bg-[var(--kyro-input-bg)] border border-[var(--kyro-input-border)] rounded-lg"
@@ -288,7 +300,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
             <input
               type="text"
               className="kyro-form-input font-mono "
-              value={value || ""}
+              value={(value as string) || ""}
               onChange={(e) => onChange(e.target.value)}
               disabled={disabled}
               placeholder="#000000"

package/src/components/ListView.tsx

@@ -1,6 +1,7 @@
 import { Search, Filter, Columns3, X, Trash2, Archive, ChevronUp, Edit2 } from "./ui/icons";
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import { Spinner } from "./ui/Spinner";
+import { navigate } from "astro:transitions/client";
 import { Shimmer } from "./ui/Shimmer";
 import { Plus } from "./ui/icons";
 import { apiGet, apiDelete, withCacheBust } from "../lib/api";
@@ -78,7 +79,7 @@ export function ListView({
       import("astro:transitions/client").then(({ navigate }) => {
         navigate(href);
       }).catch(() => {
-        window.location.href = href;
+        navigate(href);
       });
     }
   };
@@ -92,7 +93,7 @@ export function ListView({
       import("astro:transitions/client").then(({ navigate }) => {
         navigate(href);
       }).catch(() => {
-        window.location.href = href;
+        navigate(href);
       });
     }
   };
@@ -104,7 +105,16 @@ export function ListView({
   const [limit, setLimit] = useState(10);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
   const [filters, setFilters] = useState<FilterConfig[]>([]);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearch(search);
+      setPage(1); // Reset to page 1 on new search
+    }, 300);
+    return () => clearTimeout(handler);
+  }, [search]);
   const { confirm, alert } = useUIStore();
 
   const addFilter = () => {
@@ -259,9 +269,10 @@ export function ListView({
       const params = new URLSearchParams({
         page: page.toString(),
         limit: limit.toString(),
+        depth: "1",
       });
 
-      if (search) params.append("search", search);
+      if (debouncedSearch) params.append("search", debouncedSearch);
       if (sort) params.append("sort", sort.field);
       if (sort) params.append("order", sort.direction);
       if (filters.length > 0) {
@@ -279,7 +290,7 @@ export function ListView({
     } finally {
       setLoading(false);
     }
-  }, [collectionSlug, page, limit, search, sort, filters]);
+  }, [collectionSlug, page, limit, debouncedSearch, sort, filters]);
 
   // Initial fetch only if not provided with initialDocs or if empty
   useEffect(() => {
@@ -296,7 +307,7 @@ export function ListView({
       return;
     }
     fetchDocs();
-  }, [page, limit, search, sort, filters]);
+  }, [page, limit, debouncedSearch, sort, filters]);
 
   const handleSelectAll = () => {
     if (selectedIds.size === docs.length) {
@@ -764,17 +775,21 @@ function formatCellValue(value: any, type?: string, t?: any): string {
   if (Array.isArray(value)) {
     return value.map(item => {
       if (item && typeof item === "object") {
-        return item.title || item.name || item.email || item.filename || item.url || JSON.stringify(item).slice(0, 30);
+        const target = ('value' in item && typeof item.value === 'object' && item.value !== null) ? item.value : item;
+        const fallbackName = (target.firstName || target.lastName) ? `${target.firstName || ''} ${target.lastName || ''}`.trim() : undefined;
+        return target.fullName || fallbackName || target.title || target.name || target.label || target.email || target.filename || target.slug || target.id || JSON.stringify(target).slice(0, 30);
       }
       return String(item ?? "").slice(0, 30);
     }).filter(Boolean).join(", ");
   }
 
   if (typeof value === "object") {
-    if (value.title) return value.title;
-    if (value.name) return value.name;
-    if (value.email) return value.email;
-    return JSON.stringify(value).slice(0, 50);
+    const target = ('value' in value && typeof value.value === 'object' && value.value !== null) ? value.value : value;
+    const fallbackName = (target.firstName || target.lastName) ? `${target.firstName || ''} ${target.lastName || ''}`.trim() : undefined;
+    const label = target.fullName || fallbackName || target.title || target.name || target.label || target.email || target.filename || target.slug;
+    if (label) return String(label);
+    if (target.id) return String(target.id);
+    return JSON.stringify(target).slice(0, 50);
   }
   return String(value).slice(0, 60);
 }

package/src/components/MediaGallery.tsx

@@ -1256,7 +1256,7 @@ export function MediaGallery({
                   }).then(() => {
                     setShowStorageConfigModal(false);
                     setStorageConfigured(true);
-                    window.location.reload();
+                    window.dispatchEvent(new Event('kyro:soft-reload'));
                   }).catch(() => {
                     toast.error("Failed to configure storage");
                   });

package/src/components/PluginsManager.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { pluginViews } from "virtual:kyro-plugins";
+import React, { useState, useEffect, Suspense } from "react";
 import {
   Blocks,
   Settings,
@@ -15,6 +16,8 @@ import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { useTranslation } from "react-i18next";
+import { navigate } from "astro:transitions/client";
+
 
 interface Plugin {
   id: string;
@@ -32,13 +35,15 @@ interface ToggleError {
 }
 
 export function PluginsManager() {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
   const [plugins, setPlugins] = useState<Plugin[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
   const [showConfigModal, setShowConfigModal] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const PluginSettingsView = showConfigModal ? pluginViews[showConfigModal] : null;
+
   const fetchPlugins = async () => {
     try {
       setLoading(true);
@@ -93,7 +98,7 @@ export function PluginsManager() {
         actions={[
           {
             label: "Marketplace",
-            onClick: () => (window.location.href = "/admin/marketplace"),
+            onClick: () => (navigate("/admin/marketplace")),
             icon: Plus,
           },
         ]}
@@ -120,8 +125,8 @@ export function PluginsManager() {
           <div>
             <h4 className="text-sm font-bold text-blue-500 mb-1">Developer-First Approach</h4>
             <p className="text-xs text-blue-500/80 leading-relaxed">
-              Plugins inject core structural components like schemas, collections, and APIs. 
-              To ensure version-controlled integrity, plugins are entirely managed via code in your <code className="bg-blue-500/20 px-1.5 py-0.5 rounded-md text-[10px] font-mono">kyro.config.ts</code> file. 
+              Plugins inject core structural components like schemas, collections, and APIs.
+              To ensure version-controlled integrity, plugins are entirely managed via code in your <code className="bg-blue-500/20 px-1.5 py-0.5 rounded-md text-[10px] font-mono">kyro.config.ts</code> file.
               This page serves as a read-only directory of the currently installed ecosystem.
             </p>
           </div>
@@ -222,14 +227,16 @@ export function PluginsManager() {
                     </div>
 
                     <div className="flex items-center gap-1.5">
-                      <button
-                        type="button"
-                        onClick={() => setShowConfigModal(plugin.id)}
-                        className="p-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg hover:border-[var(--kyro-primary)] transition-all disabled:opacity-30 shadow-sm"
-                        disabled={!plugin.enabled}
-                      >
-                        <Settings className="w-3.5 h-3.5" />
-                      </button>
+                      {pluginViews[plugin.id] && (
+                        <button
+                          type="button"
+                          onClick={() => setShowConfigModal(plugin.id)}
+                          className="p-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg hover:border-[var(--kyro-primary)] transition-all disabled:opacity-30 shadow-sm"
+                          disabled={!plugin.enabled}
+                        >
+                          <Settings className="w-3.5 h-3.5" />
+                        </button>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -253,15 +260,26 @@ export function PluginsManager() {
         size="lg"
       >
         <ModalContent>
-          <div className="p-12 text-center space-y-4">
-            <div className="w-20 h-20 mx-auto bg-[var(--kyro-surface-accent)] rounded-3xl flex items-center justify-center border border-[var(--kyro-border)] shadow-xl">
-              <Settings className="w-10 h-10 text-[var(--kyro-primary)] opacity-40 animate-spin-slow" />
-            </div>
-            <div>
-              <h4 className="text-xl font-bold mb-1">Advanced Configuration</h4>
-              <p className="text-sm text-[var(--kyro-text-secondary)] opacity-50 italic">Settings for this plugin will be synthesized dynamically from its manifest.</p>
+          {PluginSettingsView ? (
+            <Suspense fallback={
+              <div className="p-12 flex flex-col items-center justify-center space-y-4">
+                <RefreshCw className="w-8 h-8 text-[var(--kyro-primary)] animate-spin opacity-50" />
+                <p className="text-sm text-[var(--kyro-text-secondary)]">Loading plugin settings...</p>
+              </div>
+            }>
+              <PluginSettingsView />
+            </Suspense>
+          ) : (
+            <div className="p-12 text-center space-y-4">
+              <div className="w-20 h-20 mx-auto bg-[var(--kyro-surface-accent)] rounded-3xl flex items-center justify-center border border-[var(--kyro-border)] shadow-xl">
+                <Settings className="w-10 h-10 text-[var(--kyro-primary)] opacity-40 animate-spin-slow" />
+              </div>
+              <div>
+                <h4 className="text-xl font-bold mb-1">Custom Configuration</h4>
+                <p className="text-sm text-[var(--kyro-text-secondary)] opacity-50 italic">Settings for this plugin are managed by its own custom views and components.</p>
+              </div>
             </div>
-          </div>
+          )}
         </ModalContent>
         <ModalActions>
           <button

package/src/components/Sidebar.astro

@@ -10,6 +10,7 @@ interface NavItem {
   href: string;
   label: string;
   icon: string;
+  order?: number;
 }
 
 const siteSettings = await getSiteSettings({ request: Astro.request });
@@ -33,7 +34,6 @@ const { title } = Astro.props;
 const currentPath = Astro.url.pathname;
 
 const groupedCollections = new Map<string, NavItem[]>();
-const defaultCollections: NavItem[] = [];
 
 nonAuthCollections
   .filter((col) => col.slug !== "media") //removed here cos it's been added manually in the navSections.
@@ -42,22 +42,19 @@ nonAuthCollections
       href: `${adminPath}/${col.slug}`,
       label: col.label || col.slug,
       icon: (col.admin?.icon as string) || "collection",
+      order: typeof col.admin?.order === 'number' ? col.admin.order : 999,
     };
     
-    if (col.admin?.group) {
-      const groupName = col.admin.group as string;
-      if (!groupedCollections.has(groupName)) {
-        groupedCollections.set(groupName, []);
-      }
-      groupedCollections.get(groupName)!.push(item);
-    } else {
-      defaultCollections.push(item);
+    const groupName = (col.admin?.group as string) || "Content";
+    if (!groupedCollections.has(groupName)) {
+      groupedCollections.set(groupName, []);
     }
+    groupedCollections.get(groupName)!.push(item);
   });
 
 const dynamicSections = Array.from(groupedCollections.entries()).map(([group, items]) => ({
   label: group,
-  items: items,
+  items: items.sort((a, b) => (a.order || 999) - (b.order || 999)),
 }));
 
 const navSections: { label: string; items: NavItem[] }[] = [
@@ -73,10 +70,6 @@ const navSections: { label: string; items: NavItem[] }[] = [
     ],
   },
   ...dynamicSections,
-  ...(defaultCollections.length > 0 ? [{
-    label: "Content",
-    items: defaultCollections,
-  }] : []),
   {
     label: "Settings",
     items: [

package/src/components/UserMenu.tsx

@@ -4,6 +4,7 @@ import { User, Shield, Key, Webhook, Clock, FileText, ExternalLink, HelpCircle,
 import { useAuthStore } from "../lib/stores";
 import { apiGet } from "../lib/api";
 import { useTranslation } from "react-i18next";
+import { navigate } from 'astro:transitions/client';
 
 interface UserMenuProps {
   adminPath: string;
@@ -64,9 +65,9 @@ export function UserMenu({ adminPath }: UserMenuProps) {
         onClick={() => {
           const id = currentUser?.id;
           if (id) {
-            window.location.href = `${adminPath}/users/${id}`;
+            navigate(`${adminPath}/users/${id}`);
           } else {
-            window.location.href = `${adminPath}/users`;
+            navigate(`${adminPath}/users`);
           }
         }}
       >
@@ -75,7 +76,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
 
       <DropdownItem
         icon={<Shield className="w-4 h-4" />}
-        onClick={() => window.location.href = `${adminPath}/roles`}
+        onClick={() => navigate(`${adminPath}/roles`)}
       >
         {t("userMenu.permissions", { defaultValue: "Permissions" })}
       </DropdownItem>
@@ -90,33 +91,33 @@ export function UserMenu({ adminPath }: UserMenuProps) {
 
       <DropdownItem
         icon={<Key className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/keys`)}
+        onClick={() => (navigate(`${adminPath}/keys`))}
       >
         {t("userMenu.apiKeys", { defaultValue: "API Keys" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<Webhook className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/webhooks`)}
+        onClick={() => (navigate(`${adminPath}/webhooks`))}
       >
         {t("userMenu.webHooks", { defaultValue: "Web Hooks" })}
       </DropdownItem>
       <DropdownItem
         icon={<Clock className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/sessions`)}
+        onClick={() => (navigate(`${adminPath}/sessions`))}
       >
         {t("userMenu.sessions", { defaultValue: "Sessions" })}
       </DropdownItem>
       <DropdownItem
         icon={<FileText className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/audit`)}
+        onClick={() => (navigate(`${adminPath}/audit`))}
       >
         {t("userMenu.auditLogs", { defaultValue: "Audit Logs" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<Terminal className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/rest-playground`)}
+        onClick={() => (navigate(`${adminPath}/rest-playground`))}
       >
         {t("userMenu.apiExplorer", { defaultValue: "API Explorer" })}
       </DropdownItem>
@@ -124,7 +125,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
       {(apiAccess === null || apiAccess?.graphqlEnabled) && (
         <DropdownItem
           icon={<Zap className="w-4 h-4" />}
-          onClick={() => (window.location.href = `${adminPath}/graphql`)}
+          onClick={() => (navigate(`${adminPath}/graphql`))}
         >
           {t("userMenu.graphqlPlayground", { defaultValue: "GraphQL Playground" })}
         </DropdownItem>

package/src/components/autoform/AutoFormApiView.tsx

@@ -44,7 +44,7 @@ export function AutoFormApiView({
                 </div>
               </div>
 
-              {formData.id && (
+              {Boolean(formData.id) && (
                 <div>
                   <label className="text-[10px] font-bold tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
                     Document ID

package/src/components/autoform/AutoFormHeader.tsx

@@ -179,7 +179,7 @@ export function AutoFormHeader({
             <span className="opacity-30">|</span>
             <button
               type="button"
-              onClick={() => window.location.reload()}
+              onClick={() => window.dispatchEvent(new Event('kyro:soft-reload'))}
               className="text-[var(--kyro-danger)] hover:underline"
             >
               Reload server version

package/src/components/autoform/ErrorBoundary.tsx

@@ -45,7 +45,7 @@ export class ErrorBoundary extends Component<Props, State> {
   };
 
   handleReload = () => {
-    window.location.reload();
+    window.dispatchEvent(new Event('kyro:soft-reload'));
   };
 
   render() {