@kyro-cms/admin 0.10.10 → 0.10.11

package/package.json

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

package/src/components/ActionBar.tsx

@@ -165,7 +165,7 @@ export function ActionBar({
                   <button key={v} type="button" onClick={() => { setView(v); setMoreOpen(false); }}
                     className={`px-2.5 py-1 text-[11px] font-semibold rounded-md transition-all flex-1 ${
                       view === v
-                        ? "bg-[var(--kyro-primary)] text-white"
+                        ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]"
                         : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]"
                     }`}
                   >

package/src/components/GraphQLPlayground.tsx

@@ -698,10 +698,10 @@ export function GraphQLPlayground({
           </div>
         )}
         <div className="ml-auto flex items-center gap-1 flex-wrap justify-end">
-          <button onClick={() => { setShowDocs(!showDocs); setRightTab("docs"); }} className={`p-1.5 rounded-lg transition-all ${rightTab === "docs" && showDocs ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="Schema docs">
+          <button onClick={() => { setShowDocs(!showDocs); setRightTab("docs"); }} className={`p-1.5 rounded-lg transition-all ${rightTab === "docs" && showDocs ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="Schema docs">
             <Book className="w-3.5 h-3.5" />
           </button>
-          <button onClick={() => setRightTab("history")} className={`p-1.5 rounded-lg transition-all ${rightTab === "history" ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="History">
+          <button onClick={() => setRightTab("history")} className={`p-1.5 rounded-lg transition-all ${rightTab === "history" ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="History">
             <Clock className="w-3.5 h-3.5" />
           </button>
           <button onClick={handlePrettify} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Prettify (Cmd+Shift+P)">
@@ -720,7 +720,7 @@ export function GraphQLPlayground({
           <button
             onClick={handleRun}
             disabled={isLoading}
-            className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-[var(--kyro-primary)] text-white text-xs font-semibold hover:opacity-90 disabled:opacity-50 transition-all shadow-sm"
+            className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] text-xs font-semibold hover:opacity-90 disabled:opacity-50 transition-all shadow-sm"
           >
             <Play className="w-3 h-3" />
             {isLoading ? "..." : "Run"}
@@ -734,13 +734,13 @@ export function GraphQLPlayground({
         <div className="flex md:hidden gap-1 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
           <button
             onClick={() => setMobilePanel("editor")}
-            className={`flex-1 px-3 py-1.5 text-[10px] font-semibold rounded-md transition-all ${mobilePanel === "editor" ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+            className={`flex-1 px-3 py-1.5 text-[10px] font-semibold rounded-md transition-all ${mobilePanel === "editor" ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`}
           >
             Editor
           </button>
           <button
             onClick={() => setMobilePanel("response")}
-            className={`flex-1 px-3 py-1.5 text-[10px] font-semibold rounded-md transition-all ${mobilePanel === "response" ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+            className={`flex-1 px-3 py-1.5 text-[10px] font-semibold rounded-md transition-all ${mobilePanel === "response" ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`}
           >
             Output
           </button>
@@ -755,7 +755,7 @@ export function GraphQLPlayground({
                 key={p.key}
                 onClick={() => setActiveEditorTab(p.key)}
                 className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${activeEditorTab === p.key
-                    ? "bg-[var(--kyro-primary)] text-white"
+                    ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]"
                     : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
                   }`}
               >
@@ -810,7 +810,7 @@ export function GraphQLPlayground({
                 key={p.key}
                 onClick={() => { setRightTab(p.key); if (p.key === "docs") setShowDocs(true); }}
                 className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${rightTab === p.key
-                    ? "bg-[var(--kyro-primary)] text-white"
+                    ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]"
                     : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
                   }`}
               >

package/src/components/MediaGallery.tsx

@@ -682,7 +682,7 @@ export function MediaGallery({
                     </div>
 
                     {selectedIds.has(item.id) && (
-                      <div className="absolute top-3 left-3 w-6 h-6 rounded-lg bg-[var(--kyro-primary)] text-white flex items-center justify-center shadow-lg border-2 border-white/20 animate-in zoom-in duration-300">
+                      <div className="absolute top-3 left-3 w-6 h-6 rounded-lg bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center shadow-lg border-2 border-white/20 animate-in zoom-in duration-300">
                         <Check className="w-4 h-4" />
                       </div>
                     )}

package/src/components/RestPlayground.tsx

@@ -378,7 +378,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
           <button
             onClick={handleSend}
             disabled={loading || !currentRequest.url}
-            className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-[var(--kyro-primary)] text-white text-xs font-semibold hover:opacity-90 disabled:opacity-50 transition-all shadow-sm"
+            className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] text-xs font-semibold hover:opacity-90 disabled:opacity-50 transition-all shadow-sm"
           >
             <Play className="w-3 h-3" />
             {loading ? "..." : "Send"}
@@ -479,7 +479,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
                           key={req.id}
                           className={`flex items-center gap-2 px-2 py-1 rounded cursor-pointer transition-colors ${
                             selectedRequest?.id === req.id
-                              ? "bg-[var(--kyro-primary)] text-white"
+                              ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]"
                               : "hover:bg-[var(--kyro-surface-accent)]"
                           }`}
                           onClick={() => loadRequest(req)}
@@ -573,7 +573,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
               onClick={() => setMobilePanel("editor")}
               className={`flex-1 px-3 py-1 text-[10px] font-semibold rounded-md transition-all ${
                 mobilePanel === "editor"
-                  ? "bg-[var(--kyro-primary)] text-white"
+                  ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]"
                   : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
               }`}
             >
@@ -583,7 +583,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
               onClick={() => setMobilePanel("response")}
               className={`flex-1 px-3 py-1 text-[10px] font-semibold rounded-md transition-all ${
                 mobilePanel === "response"
-                  ? "bg-[var(--kyro-primary)] text-white"
+                  ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]"
                   : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
               }`}
             >
@@ -604,7 +604,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
                   onClick={() => setActiveEditorTab(p.key)}
                   className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${
                     activeEditorTab === p.key
-                      ? "bg-[var(--kyro-primary)] text-white"
+                      ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]"
                       : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
                   }`}
                 >

package/src/components/UserMenu.tsx

@@ -11,6 +11,7 @@ interface UserMenuProps {
 export function UserMenu({ adminPath }: UserMenuProps) {
   const currentUser = useAuthStore((s) => s.user);
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [apiAccess, setApiAccess] = useState<{ graphqlEnabled?: boolean } | null>(null);
 
   useEffect(() => {
     const avatar = currentUser?.avatar;
@@ -25,6 +26,15 @@ export function UserMenu({ adminPath }: UserMenuProps) {
     }
   }, [currentUser?.avatar]);
 
+  useEffect(() => {
+    apiGet<any>("/api/globals/access-settings")
+      .then((res: any) => {
+        const data = res?.data || res;
+        setApiAccess(data?.apiAccess || {});
+      })
+      .catch(() => setApiAccess({}));
+  }, []);
+
   return (
     <Dropdown
       align="right"
@@ -109,12 +119,14 @@ export function UserMenu({ adminPath }: UserMenuProps) {
         API Explorer
       </DropdownItem>
 
-      <DropdownItem
-        icon={<Zap className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/graphql`)}
-      >
-        GraphQL Playground
-      </DropdownItem>
+      {(apiAccess === null || apiAccess?.graphqlEnabled) && (
+        <DropdownItem
+          icon={<Zap className="w-4 h-4" />}
+          onClick={() => (window.location.href = `${adminPath}/graphql`)}
+        >
+          GraphQL Playground
+        </DropdownItem>
+      )}
 
       <DropdownSeparator />
 

package/src/components/fields/ArrayLayout.tsx

@@ -47,6 +47,15 @@ export function ArrayLayout({
         const val = item[f.name!];
         if (val && typeof val === "string") return val;
       }
+      if (f.type === "group" && (f as any).fields) {
+        for (const inner of (f as any).fields) {
+          if (inner.type === "text" || inner.type === "textarea") {
+            const group = item[f.name!] as Record<string, unknown> | undefined;
+            const val = group?.[inner.name!];
+            if (val && typeof val === "string") return val;
+          }
+        }
+      }
     }
     return "";
   }

package/src/components/fields/RichTextField.tsx

@@ -166,7 +166,7 @@ const MenuBar = ({
       disabled={disabled}
       title={title}
       className={`p-1 rounded flex items-center justify-center transition-all duration-150 relative
-        ${isActive ? "bg-[var(--kyro-primary)] text-white shadow-xs scale-95" : "text-[var(--kyro-text)] hover:bg-[var(--kyro-bg-hover)]"}
+        ${isActive ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] shadow-xs scale-95" : "text-[var(--kyro-text)] hover:bg-[var(--kyro-bg-hover)]"}
         ${disabled ? "opacity-35 cursor-not-allowed" : "cursor-pointer active:scale-90"}`}
     >
       {children}
@@ -656,7 +656,7 @@ function RichTextEditor({
           <button
             type="button"
             onClick={() => setIsExpanded(false)}
-            className="px-2.5 py-1 bg-[var(--kyro-primary)] text-white text-xs rounded-md shadow-sm font-medium hover:scale-102 active:scale-98 transition-transform cursor-pointer"
+            className="px-2.5 py-1 bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] text-xs rounded-md shadow-sm font-medium hover:scale-102 active:scale-98 transition-transform cursor-pointer"
           >
             Minimize Workspace
           </button>

package/src/layouts/AdminLayout.astro

@@ -298,7 +298,7 @@ if (includeSiteName) {
       id="kyro-fab"
       type="button"
       onclick="window.openCommandPalette?.()"
-      class="fixed bottom-6 right-6 z-50 w-12 h-12 flex md:hidden items-center justify-center rounded-2xl bg-[var(--kyro-primary)] text-white shadow-lg shadow-[var(--kyro-primary)]/30 hover:shadow-xl hover:shadow-[var(--kyro-primary)]/40 hover:scale-110 active:scale-95 transition-all duration-200"
+      class="fixed bottom-6 right-6 z-50 w-12 h-12 flex md:hidden items-center justify-center rounded-2xl bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] shadow-lg shadow-[var(--kyro-primary)]/30 hover:shadow-xl hover:shadow-[var(--kyro-primary)]/40 hover:scale-110 active:scale-95 transition-all duration-200"
       title="Open command palette (Cmd+K)"
     >
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">

package/src/pages/graphql-explorer.astro

@@ -2,14 +2,33 @@
 import AdminLayout from "../layouts/AdminLayout.astro";
 import { GraphQLPlayground } from "../components/GraphQLPlayground";
 import { apiPath } from "../lib/paths";
+import { getGlobal } from "../lib/globals";
+
+const accessSettings = await getGlobal("access-settings");
+const apiAccess = accessSettings?.apiAccess || {};
+const graphqlEnabled = apiAccess.graphqlEnabled !== false;
 ---
 
 <AdminLayout title="GraphQL Explorer">
   <div class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
-    <GraphQLPlayground
-      client:load
-      endpoint={`${apiPath}/graphql`}
-      initialShowDocs={true}
-    />
+    {graphqlEnabled ? (
+      <GraphQLPlayground
+        client:load
+        endpoint={`${apiPath}/graphql`}
+        initialShowDocs={true}
+      />
+    ) : (
+      <div class="flex items-center justify-center h-full">
+        <div class="text-center p-8 max-w-md">
+          <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center">
+            <svg class="w-8 h-8 text-[var(--kyro-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+          <h2 class="text-xl font-bold text-[var(--kyro-text-primary)] mb-2">GraphQL Disabled</h2>
+          <p class="text-sm text-[var(--kyro-text-secondary)]">The GraphQL API is currently disabled. Enable it in Access Control settings to use the GraphQL Explorer.</p>
+        </div>
+      </div>
+    )}
   </div>
 </AdminLayout>

package/src/pages/graphql.astro

@@ -2,6 +2,11 @@
 import AdminLayout from "../layouts/AdminLayout.astro";
 import { GraphQLPlayground } from "../components/GraphQLPlayground";
 import { apiPath } from "../lib/paths";
+import { getGlobal } from "../lib/globals";
+
+const accessSettings = await getGlobal("access-settings");
+const apiAccess = accessSettings?.apiAccess || {};
+const graphqlEnabled = apiAccess.graphqlEnabled !== false;
 
 const url = Astro.request.url;
 const params = new URL(url).searchParams;
@@ -10,10 +15,24 @@ const initialQuery = params.get("query") || "";
 
 <AdminLayout title="GraphQL Playground">
   <div class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
-    <GraphQLPlayground
-      client:load
-      endpoint={`${apiPath}/graphql`}
-      initialQuery={initialQuery}
-    />
+    {graphqlEnabled ? (
+      <GraphQLPlayground
+        client:load
+        endpoint={`${apiPath}/graphql`}
+        initialQuery={initialQuery}
+      />
+    ) : (
+      <div class="flex items-center justify-center h-full">
+        <div class="text-center p-8 max-w-md">
+          <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center">
+            <svg class="w-8 h-8 text-[var(--kyro-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+          <h2 class="text-xl font-bold text-[var(--kyro-text-primary)] mb-2">GraphQL Disabled</h2>
+          <p class="text-sm text-[var(--kyro-text-secondary)]">The GraphQL API is currently disabled. Enable it in Access Control settings to use the GraphQL playground.</p>
+        </div>
+      </div>
+    )}
   </div>
 </AdminLayout>

package/src/pages/index.astro

@@ -1,7 +1,6 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
 import { collections } from "../lib/config";
-
 const authCollections = ["users", "audit_logs"];
 import { adminPath, apiPath } from "../lib/paths";
 
@@ -238,196 +237,6 @@ const authItems = authCollections.map((slug) => ({
       </div>
     </div>
 
-    <!-- Developer Tools Section -->
-    <div class="surface-tile overflow-hidden">
-      <div class="p-6 border-b border-[var(--kyro-border)]">
-        <h2
-          class="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]"
-        >
-          Developer Tools
-        </h2>
-        <p class="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
-          REST API & GraphQL testing tools
-        </p>
-      </div>
-
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-8">
-        <!-- REST API -->
-        <div class="bg-[var(--kyro-surface-accent)] rounded-2xl p-6">
-          <div class="flex items-center gap-3 mb-6">
-            <div
-              class="w-10 h-10 rounded-xl bg-pink-500/10 flex items-center justify-center text-pink-500"
-            >
-              <svg
-                class="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                ></path>
-              </svg>
-            </div>
-            <div>
-              <h3 class="text-xl font-bold text-[var(--kyro-text-primary)]">
-                REST API
-              </h3>
-              <p class="text-xs text-[var(--kyro-text-secondary)]">
-                HTTP endpoints
-              </p>
-            </div>
-          </div>
-          <div class="grid grid-cols-1 gap-4">
-            <a
-              href={`${adminPath}/rest-playground`}
-              class="group p-4 bg-[var(--kyro-surface)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]"
-            >
-              <div class="flex items-center gap-3 mb-2">
-                <div
-                  class="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-500 group-hover:scale-110 transition-transform"
-                >
-                  <svg
-                    class="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                    ></path>
-                  </svg>
-                </div>
-                <h4 class="font-medium text-[var(--kyro-text-primary)]">
-                  Playground
-                </h4>
-              </div>
-              <p class="text-xs text-[var(--kyro-text-secondary)]">
-                Saved requests & history
-              </p>
-            </a>
-          </div>
-          <div class="mt-4 pt-4 border-t border-[var(--kyro-border)]">
-            <a
-              href={`${apiPath}/collections`}
-              target="_blank"
-              class="flex items-center gap-2 text-xs text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-secondary)] transition-colors"
-            >
-              <svg
-                class="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                ></path>
-              </svg>
-              View Collections JSON
-            </a>
-          </div>
-        </div>
-
-        <!-- GraphQL -->
-        <div class="bg-[var(--kyro-surface-accent)] rounded-2xl p-6">
-          <div class="flex items-center gap-3 mb-6">
-            <div
-              class="w-10 h-10 rounded-xl bg-pink-500/10 flex items-center justify-center text-pink-500"
-            >
-              <svg
-                class="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-              </svg>
-            </div>
-            <div>
-              <h3 class="text-xl font-bold text-[var(--kyro-text-primary)]">
-                GraphQL
-              </h3>
-              <p class="text-xs text-[var(--kyro-text-secondary)]">
-                Query language API
-              </p>
-            </div>
-          </div>
-          <div class="grid grid-cols-1 gap-4">
-            <a
-              href={`${adminPath}/graphql`}
-              class="group p-4 bg-[var(--kyro-surface)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]"
-            >
-              <div class="flex items-center gap-3 mb-2">
-                <div
-                  class="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center text-purple-500 group-hover:scale-110 transition-transform"
-                >
-                  <svg
-                    class="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-                    ></path>
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                  </svg>
-                </div>
-                <h4 class="font-medium text-[var(--kyro-text-primary)]">
-                  Explorer
-                </h4>
-              </div>
-              <p class="text-xs text-[var(--kyro-text-secondary)]">
-                Write & test queries
-              </p>
-            </a>
-          </div>
-          <div class="mt-4 pt-4 border-t border-[var(--kyro-border)]">
-            <a
-              href={`${apiPath}/graphql`}
-              target="_blank"
-              class="flex items-center gap-2 text-xs text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-secondary)] transition-colors"
-            >
-              <svg
-                class="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                ></path>
-              </svg>
-              View GraphQL Endpoint
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-
     <script is:inline define:vars={{ apiPath, adminPath }}>
       (function () {
         var searchInput = document.getElementById("header-search-input");