From 4f89366d772d85c1ad54cf896cbcb4d3cfd8009f Mon Sep 17 00:00:00 2001
From: MrPiglr <MrPiglr@gmail.com>
Date: Sat, 10 Jan 2026 02:29:14 +0000
Subject: [PATCH] feat: Improve developer platform navigation and
 discoverability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add breadcrumbs to all developer platform pages for better navigation context
- Add 'Main Dashboard' link to developer mode navigation for easy exit
- Add prominent developer CTA card to main dashboard to increase discovery
- Wrap developer dashboard route with RequireAccess for authentication

User Flow Improvements:
✓ Users can now easily navigate back to main dashboard from dev platform
✓ Breadcrumbs show clear path: Home > Developer Platform > Current Page
✓ New users see attractive CTA with API keys, docs, and templates links
✓ Authentication enforced on /dev-platform/dashboard

Files changed: 9 (Layout, Dashboard, and 7 dev-platform pages)
---
 client/App.tsx                                |  9 ++++-
 client/components/Layout.tsx                  |  2 ++
 client/pages/Dashboard.tsx                    | 35 +++++++++++++++++++
 client/pages/dev-platform/ApiReference.tsx    |  2 ++
 client/pages/dev-platform/CodeExamples.tsx    |  1 +
 .../pages/dev-platform/DeveloperDashboard.tsx |  2 ++
 client/pages/dev-platform/Marketplace.tsx     |  1 +
 client/pages/dev-platform/QuickStart.tsx      |  2 ++
 client/pages/dev-platform/Templates.tsx       |  1 +
 9 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/client/App.tsx b/client/App.tsx
index 985e6108..839935fc 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -831,7 +831,14 @@ const App = () => (
 
                         {/* Developer Platform Routes */}
                         <Route path="/dev-platform" element={<DeveloperPlatform />} />
-                        <Route path="/dev-platform/dashboard" element={<DeveloperDashboard />} />
+                        <Route 
+                          path="/dev-platform/dashboard" 
+                          element={
+                            <RequireAccess>
+                              <DeveloperDashboard />
+                            </RequireAccess>
+                          } 
+                        />
                         <Route path="/dev-platform/api-reference" element={<ApiReference />} />
                         <Route path="/dev-platform/quick-start" element={<QuickStart />} />
                         <Route path="/dev-platform/templates" element={<Templates />} />
diff --git a/client/components/Layout.tsx b/client/components/Layout.tsx
index fa253b4e..cb874df9 100644
--- a/client/components/Layout.tsx
+++ b/client/components/Layout.tsx
@@ -88,6 +88,8 @@ export default function CodeLayout({ children, hideFooter }: LayoutProps) {
     { name: "Templates", href: "/dev-platform/templates" },
     { name: "Marketplace", href: "/dev-platform/marketplace" },
     { name: "Examples", href: "/dev-platform/examples" },
+    { name: "divider", href: "#" },
+    { name: "Main Dashboard", href: "/dashboard" },
     { name: "Exit Dev Mode", href: "/" },
   ];
 
diff --git a/client/pages/Dashboard.tsx b/client/pages/Dashboard.tsx
index e81294da..a5944cc5 100644
--- a/client/pages/Dashboard.tsx
+++ b/client/pages/Dashboard.tsx
@@ -411,6 +411,41 @@ export default function Dashboard() {
 
             {/* Realms Tab */}
             <TabsContent value="realms" className="space-y-6 animate-fade-in">
+              {/* Developer CTA Card */}
+              {user && (
+                <Card className="p-6 bg-gradient-to-br from-primary/10 to-primary/5 border-primary/20 hover:border-primary/40 transition-all">
+                  <div className="flex flex-col md:flex-row items-start gap-4">
+                    <div className="p-3 bg-primary/20 rounded-lg shrink-0">
+                      <Code className="w-6 h-6 text-primary" />
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold mb-2">Building with AeThex?</h3>
+                      <p className="text-sm text-muted-foreground mb-4">
+                        Get API keys, access comprehensive documentation, and explore developer tools to integrate AeThex into your applications.
+                      </p>
+                      <div className="flex flex-wrap gap-3">
+                        <Link to="/dev-platform/dashboard">
+                          <Button size="sm">
+                            <Rocket className="w-4 h-4 mr-2" />
+                            Get API Keys
+                          </Button>
+                        </Link>
+                        <Link to="/dev-platform/api-reference">
+                          <Button size="sm" variant="outline">
+                            View API Docs
+                          </Button>
+                        </Link>
+                        <Link to="/dev-platform/templates">
+                          <Button size="sm" variant="outline">
+                            Browse Templates
+                          </Button>
+                        </Link>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              )}
+              
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {ARMS.map((arm) => {
                   const IconComponent = arm.icon;
diff --git a/client/pages/dev-platform/ApiReference.tsx b/client/pages/dev-platform/ApiReference.tsx
index 50ec1584..13f7e64e 100644
--- a/client/pages/dev-platform/ApiReference.tsx
+++ b/client/pages/dev-platform/ApiReference.tsx
@@ -1,5 +1,6 @@
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { ThreeColumnLayout } from "@/components/dev-platform/layouts/ThreeColumnLayout";
 import { ApiEndpointCard } from "@/components/dev-platform/ui/ApiEndpointCard";
 import { CodeTabs } from "@/components/dev-platform/CodeTabs";
@@ -68,6 +69,7 @@ export default function ApiReference() {
   return (
     <Layout>
       <SEO pageTitle="API Reference" description="Complete documentation for the AeThex Developer API" />
+      <Breadcrumbs className="mb-6" />
       <ThreeColumnLayout
         sidebar={sidebarContent}
         aside={asideContent}
diff --git a/client/pages/dev-platform/CodeExamples.tsx b/client/pages/dev-platform/CodeExamples.tsx
index 525e55d0..3e5f2acf 100644
--- a/client/pages/dev-platform/CodeExamples.tsx
+++ b/client/pages/dev-platform/CodeExamples.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { ExampleCard } from "@/components/dev-platform/ExampleCard";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
diff --git a/client/pages/dev-platform/DeveloperDashboard.tsx b/client/pages/dev-platform/DeveloperDashboard.tsx
index 7197094c..30e9adc2 100644
--- a/client/pages/dev-platform/DeveloperDashboard.tsx
+++ b/client/pages/dev-platform/DeveloperDashboard.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { StatCard } from "@/components/dev-platform/ui/StatCard";
 import { ApiKeyCard } from "@/components/dev-platform/ApiKeyCard";
 import { CreateApiKeyDialog } from "@/components/dev-platform/CreateApiKeyDialog";
@@ -215,6 +216,7 @@ export default function DeveloperDashboard() {
   return (
     <Layout>
       <SEO pageTitle="Developer Dashboard" description="Manage your API keys and monitor usage" />
+      <Breadcrumbs className="mb-6" />
       <div className="space-y-8">
         {/* Warning for expiring keys */}
         {expiringSoon.length > 0 && (
diff --git a/client/pages/dev-platform/Marketplace.tsx b/client/pages/dev-platform/Marketplace.tsx
index 7a5813da..7d193b86 100644
--- a/client/pages/dev-platform/Marketplace.tsx
+++ b/client/pages/dev-platform/Marketplace.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { MarketplaceCard } from "@/components/dev-platform/MarketplaceCard";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
diff --git a/client/pages/dev-platform/QuickStart.tsx b/client/pages/dev-platform/QuickStart.tsx
index f63ca7b0..d3675033 100644
--- a/client/pages/dev-platform/QuickStart.tsx
+++ b/client/pages/dev-platform/QuickStart.tsx
@@ -1,5 +1,6 @@
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { ThreeColumnLayout } from "@/components/dev-platform/layouts/ThreeColumnLayout";
 import { CodeTabs } from "@/components/dev-platform/CodeTabs";
 import { Callout } from "@/components/dev-platform/ui/Callout";
@@ -85,6 +86,7 @@ export default function QuickStart() {
   return (
     <Layout>
       <SEO pageTitle="Quick Start Guide" description="Get up and running with the AeThex API in minutes" />
+      <Breadcrumbs className="mb-6" />
       <ThreeColumnLayout sidebar={sidebarContent} aside={asideContent}>
         <div className="space-y-12">
           {/* Introduction */}
diff --git a/client/pages/dev-platform/Templates.tsx b/client/pages/dev-platform/Templates.tsx
index 2423d836..abc9123a 100644
--- a/client/pages/dev-platform/Templates.tsx
+++ b/client/pages/dev-platform/Templates.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { TemplateCard } from "@/components/dev-platform/TemplateCard";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";