insforge 0.3.2 → 1.2.10

package/frontend/src/features/visualizer/components/VisualizerSkeleton.tsx

@@ -1,9 +1,17 @@
 export function VisualizerSkeleton() {
   return (
-    <div className="relative min-h-screen bg-neutral-800 overflow-hidden">
-      {/* Dot Matrix Background */}
+    <div className="relative h-full bg-gray-50 dark:bg-neutral-800 overflow-hidden">
+      {/* Dot Matrix Background - Light Mode */}
       <div
-        className="absolute inset-0 opacity-50"
+        className="absolute inset-0 opacity-50 dark:hidden"
+        style={{
+          backgroundImage: `radial-gradient(circle, #D1D5DB 1px, transparent 1px)`,
+          backgroundSize: '12px 12px',
+        }}
+      />
+      {/* Dot Matrix Background - Dark Mode */}
+      <div
+        className="absolute inset-0 opacity-50 hidden dark:block"
         style={{
           backgroundImage: `radial-gradient(circle, #3B3B3B 1px, transparent 1px)`,
           backgroundSize: '12px 12px',
@@ -13,7 +21,7 @@ export function VisualizerSkeleton() {
       {/* Loading content */}
       <div className="relative z-10 flex items-center justify-center min-h-screen">
         <div className="text-center">
-          <div className="inline-flex items-center gap-3 text-white">
+          <div className="inline-flex items-center gap-3 text-zinc-950 dark:text-white">
             <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
             <span className="text-lg font-medium">Loading schema visualization...</span>
           </div>

package/frontend/src/features/visualizer/page/VisualizerPage.tsx

@@ -1,11 +1,10 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { RefreshCw } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
-import { useMetadata } from '@/features/metadata/hooks/useMetadata';
-import { authService } from '@/features/auth/services/auth.service';
+import { useMetadata } from '@/lib/hooks/useMetadata';
+import { useUsers } from '@/features/auth/hooks/useUsers';
 import { SchemaVisualizer, VisualizerSkeleton } from '../components';
-import { Button } from '@/components/radix/Button';
-import { Alert, AlertDescription } from '@/components/radix/Alert';
+import { Alert, AlertDescription, Button } from '@/components';
 import {
   useSocket,
   ServerEvents,
@@ -26,18 +25,10 @@ const VisualizerPage = () => {
   } = useMetadata();
 
   const {
-    data: userStats,
+    totalUsers,
     isLoading: userStatsLoading,
     refetch: refetchUserStats,
-  } = useQuery({
-    queryKey: ['user-stats-visualizer'],
-    queryFn: async () => {
-      const response = await authService.getUsers();
-      return { userCount: response.pagination.total };
-    },
-    staleTime: 5 * 60 * 1000,
-    gcTime: 10 * 60 * 1000,
-  });
+  } = useUsers({ enabled: true });
 
   const isLoading = metadataLoading || userStatsLoading;
   const error = metadataError;
@@ -55,11 +46,8 @@ const VisualizerPage = () => {
 
     const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
       if (
-        message.payload?.resource === DataUpdateResourceType.METADATA ||
-        message.payload?.resource === DataUpdateResourceType.DATABASE_SCHEMA ||
-        message.payload?.resource === DataUpdateResourceType.TABLE_SCHEMA ||
-        message.payload?.resource === DataUpdateResourceType.OAUTH_SCHEMA ||
-        message.payload?.resource === DataUpdateResourceType.STORAGE_SCHEMA
+        message.payload?.resource === DataUpdateResourceType.DATABASE ||
+        message.payload?.resource === DataUpdateResourceType.BUCKETS
       ) {
         // Invalidate all metadata-related queries
         void queryClient.invalidateQueries({ queryKey: ['metadata'] });
@@ -79,17 +67,25 @@ const VisualizerPage = () => {
 
   if (!metadata || error) {
     return (
-      <div className="relative min-h-screen bg-neutral-800 overflow-hidden">
-        {/* Dot Matrix Background */}
+      <div className="relative h-full bg-gray-50 dark:bg-neutral-800 overflow-hidden">
+        {/* Dot Matrix Background - Light Mode */}
         <div
-          className="absolute inset-0 opacity-50"
+          className="absolute inset-0 opacity-50 dark:hidden"
+          style={{
+            backgroundImage: `radial-gradient(circle, #D1D5DB 1px, transparent 1px)`,
+            backgroundSize: '12px 12px',
+          }}
+        />
+        {/* Dot Matrix Background - Dark Mode */}
+        <div
+          className="absolute inset-0 opacity-50 hidden dark:block"
           style={{
             backgroundImage: `radial-gradient(circle, #3B3B3B 1px, transparent 1px)`,
             backgroundSize: '12px 12px',
           }}
         />
 
-        <div className="relative z-10 flex items-center justify-center min-h-screen p-8">
+        <div className="relative z-10 flex items-center justify-center h-full p-8">
           <Alert variant="destructive" className="max-w-md">
             <AlertDescription>
               Failed to load database schema. Please ensure the backend is running and try
@@ -106,10 +102,18 @@ const VisualizerPage = () => {
   }
 
   return (
-    <div className="relative min-h-screen bg-neutral-800 overflow-hidden">
-      {/* Dot Matrix Background */}
+    <div className="relative h-full bg-gray-50 dark:bg-neutral-800 overflow-hidden">
+      {/* Dot Matrix Background - Light Mode */}
+      <div
+        className="absolute inset-0 opacity-50 dark:hidden"
+        style={{
+          backgroundImage: `radial-gradient(circle, #D1D5DB 1px, transparent 1px)`,
+          backgroundSize: '12px 12px',
+        }}
+      />
+      {/* Dot Matrix Background - Dark Mode */}
       <div
-        className="absolute inset-0 opacity-50"
+        className="absolute inset-0 opacity-50 hidden dark:block"
         style={{
           backgroundImage: `radial-gradient(circle, #3B3B3B 1px, transparent 1px)`,
           backgroundSize: '12px 12px',
@@ -117,8 +121,8 @@ const VisualizerPage = () => {
       />
 
       {/* Schema Visualizer */}
-      <div className="relative z-10 w-full h-screen">
-        <SchemaVisualizer metadata={metadata} userCount={userStats?.userCount} />
+      <div className="relative z-10 w-full h-full">
+        <SchemaVisualizer metadata={metadata} userCount={totalUsers} />
       </div>
     </div>
   );

package/frontend/src/index.css

@@ -60,6 +60,7 @@
     --fontFamilyBase:
       'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     --fontFamilyMono: 'Ubuntu Mono', ui-monospace, monospace;
+    --fontFamilyManrope: 'Manrope', sans-serif;
   }
 
   /* Prevent document-level scrolling */

package/frontend/src/lib/analytics/posthog.tsx

@@ -0,0 +1,27 @@
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+
+const POSTHOG_KEY = import.meta.env.VITE_PUBLIC_POSTHOG_KEY || '';
+
+if (POSTHOG_KEY) {
+  try {
+    posthog.init(POSTHOG_KEY, {
+      api_host: 'https://us.i.posthog.com',
+      capture_exceptions: true, // This enables capturing exceptions using Error Tracking
+      debug: import.meta.env.DEV,
+      session_recording: {
+        // WARNING: Only enable this if you understand the security implications
+        recordCrossOriginIframes: true,
+      },
+    });
+  } catch (error) {
+    console.error('Error initializing PostHog', error);
+  }
+}
+
+export const PostHogAnalyticsProvider = ({ children }: { children: React.ReactNode }) => {
+  if (POSTHOG_KEY) {
+    return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+  }
+  return <>{children}</>;
+};

package/frontend/src/lib/contexts/AuthContext.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { authService } from '@/features/auth/services/auth.service';
 import { apiClient } from '@/lib/api/client';
+import { userService } from '@/features/auth/services/user.service';
 
 export interface User {
   id: string;
@@ -60,7 +60,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     try {
       setIsLoading(true);
       setError(null);
-      const currentUser = await authService.getCurrentUser();
+      const currentUser = await userService.getCurrentUser();
       setUser(currentUser);
       setIsAuthenticated(true);
       return currentUser;
@@ -77,54 +77,64 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   }, []);
 
+  const invalidateAuthQueries = useCallback(async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: ['apiKey'] }),
+      queryClient.invalidateQueries({ queryKey: ['metadata'] }),
+      queryClient.invalidateQueries({ queryKey: ['users'] }),
+      queryClient.invalidateQueries({ queryKey: ['tables'] }),
+      queryClient.invalidateQueries({ queryKey: ['mcp-usage'] }),
+    ]);
+  }, [queryClient]);
+
   const loginWithPassword = useCallback(
     async (email: string, password: string): Promise<boolean> => {
       try {
         setError(null);
-        await authService.loginWithPassword(email, password);
-        const currentUser = await checkAuthStatus();
-        if (currentUser) {
-          // Invalidate queries that depend on authentication
-          void queryClient.invalidateQueries({ queryKey: ['apiKey'] });
-          void queryClient.invalidateQueries({ queryKey: ['metadata'] });
-          void queryClient.invalidateQueries({ queryKey: ['users'] });
-          void queryClient.invalidateQueries({ queryKey: ['tables'] });
-          return true;
-        }
-        return false;
+        const data = await apiClient.request('/auth/admin/sessions', {
+          method: 'POST',
+          body: JSON.stringify({ email, password }),
+        });
+
+        apiClient.setToken(data.accessToken);
+        setUser(data.user);
+        setIsAuthenticated(true);
+
+        await invalidateAuthQueries();
+        return true;
       } catch (err) {
         setError(err instanceof Error ? err : new Error('Login failed'));
         return false;
       }
     },
-    [checkAuthStatus, queryClient]
+    [invalidateAuthQueries]
   );
 
   const loginWithAuthorizationCode = useCallback(
-    async (token: string): Promise<boolean> => {
+    async (code: string): Promise<boolean> => {
       try {
         setError(null);
-        await authService.loginWithAuthorizationCode(token);
-        const currentUser = await checkAuthStatus();
-        if (currentUser) {
-          // Invalidate queries that depend on authentication
-          void queryClient.invalidateQueries({ queryKey: ['apiKey'] });
-          void queryClient.invalidateQueries({ queryKey: ['metadata'] });
-          void queryClient.invalidateQueries({ queryKey: ['users'] });
-          void queryClient.invalidateQueries({ queryKey: ['tables'] });
-          return true;
-        }
-        return false;
+        const data = await apiClient.request('/auth/admin/sessions/exchange', {
+          method: 'POST',
+          body: JSON.stringify({ code }),
+        });
+
+        apiClient.setToken(data.accessToken);
+        setUser(data.user);
+        setIsAuthenticated(true);
+
+        await invalidateAuthQueries();
+        return true;
       } catch (err) {
         setError(err instanceof Error ? err : new Error('Authorization code exchange failed'));
         return false;
       }
     },
-    [checkAuthStatus, queryClient]
+    [invalidateAuthQueries]
   );
 
   const logout = useCallback(() => {
-    void authService.logout();
+    apiClient.clearToken();
     setUser(null);
     setIsAuthenticated(false);
     setError(null);
@@ -139,9 +149,6 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     void checkAuthStatus();
   }, [checkAuthStatus]);
 
-  // Removed periodic auth refresh - it was causing unnecessary unmounts
-  // Auth status is checked naturally when API calls are made
-
   const value: AuthContextType = {
     user,
     isAuthenticated,

package/frontend/src/lib/contexts/SocketContext.tsx

@@ -54,12 +54,11 @@ export interface NotificationPayload {
 }
 
 export enum DataUpdateResourceType {
-  METADATA = 'metadata',
-  DATABASE_SCHEMA = 'database_schema',
-  TABLE_SCHEMA = 'table_schema',
-  STORAGE_SCHEMA = 'storage_schema',
-  BUCKET_SCHEMA = 'bucket_schema',
-  OAUTH_SCHEMA = 'oauth_schmea',
+  DATABASE = 'database',
+  USERS = 'users',
+  RECORDS = 'records',
+  BUCKETS = 'buckets',
+  FUNCTIONS = 'functions',
 }
 
 export interface DataUpdatePayload {

package/frontend/src/{features/metadata → lib}/hooks/useMetadata.ts

@@ -22,7 +22,7 @@ export function useMetadata(options?: UseMetadataOptions) {
   return {
     metadata,
     auth: metadata?.auth,
-    tables: Object.keys(metadata?.database.tables ?? {}),
+    tables: metadata?.database.tables?.filter((table) => table.tableName !== 'users') ?? [],
     storage: metadata?.storage,
     version: metadata?.version || 'Unknown',
     isLoading,

package/frontend/src/lib/hooks/useToast.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useCallback } from 'react';
 import { useTimeout } from './useTimeout';
-import { generateUUID } from '@/lib/utils/utils';
+import { cn, generateUUID } from '@/lib/utils/utils';
 
 interface Toast {
   id: string;
@@ -191,7 +191,11 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     <ToastContext.Provider value={{ showToast, updateToast, removeToast }}>
       {children}
       {/* Regular toasts - top center */}
-      <div className="fixed top-7.5 dark:top-20 left-1/2 transform -translate-x-1/2 z-[9999] flex flex-col gap-3 w-full max-w-[480px]">
+      <div
+        className={cn(
+          'fixed top-2 left-1/2 transform -translate-x-1/2 z-[9999] flex flex-col gap-3 w-full max-w-[480px]'
+        )}
+      >
         {toasts
           .filter((t) => t.type !== 'upload')
           .map((toast) => (

package/frontend/src/lib/routing/AppRoutes.tsx

@@ -0,0 +1,84 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { RequireAuth } from '@/lib/routing/RequireAuth';
+import Layout from '@/components/layout/Layout';
+import LoginPage from '@/features/login/page/LoginPage';
+import CloudLoginPage from '@/features/login/page/CloudLoginPage';
+import DashboardPage from '@/features/dashboard/page/DashboardPage';
+import TablesPage from '@/features/database/page/TablesPage';
+import UsersPage from '@/features/auth/page/UsersPage';
+import AuthMethodsPage from '@/features/auth/page/AuthMethodsPage';
+import ConfigurationPage from '@/features/auth/page/ConfigurationPage';
+import LogsPage from '@/features/logs/page/LogsPage';
+import MCPLogsPage from '@/features/logs/page/MCPLogsPage';
+import StoragePage from '@/features/storage/page/StoragePage';
+import VisualizerPage from '@/features/visualizer/page/VisualizerPage';
+import FunctionsPage from '@/features/functions/page/FunctionsPage';
+import SecretsPage from '@/features/functions/page/SecretsPage';
+import AIPage from '@/features/ai/page/AIPage';
+import SQLEditorPage from '@/features/database/page/SQLEditorPage';
+import IndexesPage from '@/features/database/page/IndexesPage';
+import DatabaseFunctionsPage from '@/features/database/page/FunctionsPage';
+import TriggersPage from '@/features/database/page/TriggersPage';
+import PoliciesPage from '@/features/database/page/PoliciesPage';
+import TemplatesPage from '@/features/database/page/TemplatesPage';
+
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/dashboard/login" element={<LoginPage />} />
+      <Route path="/cloud/login" element={<CloudLoginPage />} />
+      <Route
+        path="/*"
+        element={
+          <RequireAuth>
+            <Layout>
+              <Routes>
+                <Route path="/" element={<Navigate to="/dashboard" replace />} />
+                <Route path="/dashboard" element={<DashboardPage />} />
+                <Route path="/dashboard/users" element={<UsersPage />} />
+                <Route path="/dashboard/tables" element={<TablesPage />} />
+                <Route
+                  path="/dashboard/authentication"
+                  element={<Navigate to="/dashboard/authentication/auth-methods" replace />}
+                />
+                <Route path="/dashboard/authentication/users" element={<UsersPage />} />
+                <Route
+                  path="/dashboard/authentication/auth-methods"
+                  element={<AuthMethodsPage />}
+                />
+                <Route path="/dashboard/authentication/config" element={<ConfigurationPage />} />
+                <Route
+                  path="/dashboard/database"
+                  element={<Navigate to="/dashboard/database/indexes" replace />}
+                />
+                <Route path="/dashboard/database/tables" element={<TablesPage />} />
+                <Route path="/dashboard/database/indexes" element={<IndexesPage />} />
+                <Route path="/dashboard/database/functions" element={<DatabaseFunctionsPage />} />
+                <Route path="/dashboard/database/triggers" element={<TriggersPage />} />
+                <Route path="/dashboard/database/policies" element={<PoliciesPage />} />
+                <Route path="/dashboard/database/sql-editor" element={<SQLEditorPage />} />
+                <Route path="/dashboard/database/templates" element={<TemplatesPage />} />
+                <Route path="/dashboard/storage" element={<StoragePage />} />
+                <Route
+                  path="/dashboard/logs"
+                  element={<Navigate to="/dashboard/logs/MCP" replace />}
+                />
+                <Route path="/dashboard/logs/MCP" element={<MCPLogsPage />} />
+                <Route path="/dashboard/logs/:source" element={<LogsPage />} />
+                <Route
+                  path="/dashboard/functions"
+                  element={<Navigate to="/dashboard/functions/list" replace />}
+                />
+                <Route path="/dashboard/functions/list" element={<FunctionsPage />} />
+                <Route path="/dashboard/functions/secrets" element={<SecretsPage />} />
+                <Route path="/dashboard/visualizer" element={<VisualizerPage />} />
+                <Route path="/dashboard/ai" element={<AIPage />} />
+                <Route path="*" element={<Navigate to="/dashboard" replace />} />
+              </Routes>
+            </Layout>
+          </RequireAuth>
+        }
+      />
+    </Routes>
+  );
+}

package/frontend/src/lib/routing/RequireAuth.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '@/lib/contexts/AuthContext';
+import { LoadingState } from '@/components/LoadingState';
+import { isIframe } from '../utils/utils';
+
+interface RequireAuthProps {
+  children: ReactNode;
+}
+
+export const RequireAuth = ({ children }: RequireAuthProps) => {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <LoadingState />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to={isIframe() ? '/cloud/login' : '/dashboard/login'} replace />;
+  }
+
+  return <>{children}</>;
+};

package/frontend/src/lib/utils/cloudMessaging.ts

@@ -0,0 +1,20 @@
+import { cloudEventSchema, CloudEvent } from '@insforge/shared-schemas';
+
+export function postMessageToParent(evt: CloudEvent, targetOrigin: string = '*') {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  if (window.parent !== window) {
+    window.parent.postMessage(evt, targetOrigin);
+  }
+}
+
+/**
+ * Parses and validates an unknown value as a CloudEvent.
+ * @param value - The value to validate
+ * @returns A discriminated union: { ok: true; data: CloudEvent } on success, { ok: false } on failure
+ */
+export function parseCloudEvent(value: unknown): { ok: true; data: CloudEvent } | { ok: false } {
+  const parsed = cloudEventSchema.safeParse(value);
+  return parsed.success ? { ok: true, data: parsed.data } : { ok: false };
+}

package/frontend/src/lib/utils/menuItems.ts

@@ -0,0 +1,183 @@
+import {
+  type LucideIcon,
+  Home,
+  Database,
+  Lock,
+  HardDrive,
+  Code2,
+  Sparkles,
+  ChartLine,
+  BookOpen,
+  GitFork,
+  Users,
+  Table,
+  ChartBarBig,
+} from 'lucide-react';
+import { postMessageToParent } from './cloudMessaging';
+
+export interface SecondaryMenuItem {
+  id: string;
+  label: string;
+  href: string;
+  sectionEnd?: boolean; // Add support for separator after the item
+}
+
+export interface PrimaryMenuItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: LucideIcon;
+  secondaryMenu?: SecondaryMenuItem[];
+  onClick?: () => void;
+  external?: boolean;
+  sectionEnd?: boolean;
+}
+
+/**
+ * Static menu items configuration
+ * Primary menu items appear as icons in the left sidebar
+ * Secondary menu items appear in a collapsed sidebar when a primary item is selected
+ */
+export const staticMenuItems: PrimaryMenuItem[] = [
+  {
+    id: 'dashboard',
+    label: 'Dashboard',
+    href: '/dashboard',
+    icon: Home,
+  },
+  {
+    id: 'users',
+    label: 'Users',
+    href: '/dashboard/users',
+    icon: Users,
+  },
+  {
+    id: 'tables',
+    label: 'Tables',
+    href: '/dashboard/tables',
+    icon: Table,
+    sectionEnd: true,
+  },
+  {
+    id: 'authentication',
+    label: 'Authentication',
+    href: '/dashboard/authentication',
+    icon: Lock,
+    secondaryMenu: [
+      {
+        id: 'auth-methods',
+        label: 'Auth Methods',
+        href: '/dashboard/authentication/auth-methods',
+      },
+      {
+        id: 'configuration',
+        label: 'Configurations',
+        href: '/dashboard/authentication/config',
+      },
+    ],
+  },
+  {
+    id: 'database',
+    label: 'Database',
+    href: '/dashboard/database',
+    icon: Database,
+    secondaryMenu: [
+      {
+        id: 'indexes',
+        label: 'Indexes',
+        href: '/dashboard/database/indexes',
+      },
+      {
+        id: 'functions',
+        label: 'Functions',
+        href: '/dashboard/database/functions',
+      },
+      {
+        id: 'triggers',
+        label: 'Triggers',
+        href: '/dashboard/database/triggers',
+      },
+      {
+        id: 'policies',
+        label: 'Policies',
+        href: '/dashboard/database/policies',
+      },
+      {
+        id: 'sql-editor',
+        label: 'SQL Editor',
+        href: '/dashboard/database/sql-editor',
+      },
+      {
+        id: 'templates',
+        label: 'Templates',
+        href: '/dashboard/database/templates',
+        sectionEnd: true,
+      },
+    ],
+  },
+  {
+    id: 'storage',
+    label: 'Storage',
+    href: '/dashboard/storage',
+    icon: HardDrive,
+  },
+  {
+    id: 'functions',
+    label: 'Functions',
+    href: '/dashboard/functions',
+    icon: Code2,
+    secondaryMenu: [
+      {
+        id: 'functions-list',
+        label: 'Functions',
+        href: '/dashboard/functions/list',
+      },
+      {
+        id: 'secrets',
+        label: 'Secrets',
+        href: '/dashboard/functions/secrets',
+      },
+    ],
+  },
+  {
+    id: 'ai',
+    label: 'AI',
+    href: '/dashboard/ai',
+    icon: Sparkles,
+    sectionEnd: true,
+  },
+  {
+    id: 'logs',
+    label: 'Logs',
+    href: '/dashboard/logs',
+    icon: ChartLine,
+    // Secondary menu is populated dynamically in AppSidebar using useLogSources
+  },
+  {
+    id: 'visualizer',
+    label: 'Visualizer',
+    href: '/dashboard/visualizer',
+    icon: GitFork,
+  },
+];
+
+/**
+ * Bottom menu items that may be conditionally shown
+ */
+export const documentationMenuItem: PrimaryMenuItem = {
+  id: 'documentation',
+  label: 'Documentation',
+  href: 'https://docs.insforge.dev',
+  icon: BookOpen,
+  external: true,
+};
+
+export const usageMenuItem: PrimaryMenuItem = {
+  id: 'usage',
+  label: 'Usage',
+  href: '',
+  icon: ChartBarBig,
+  onClick: () => {
+    postMessageToParent({ type: 'NAVIGATE_TO_USAGE' }, '*');
+  },
+};