create-lego-one 2.0.20 → 2.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lego-one",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "description": "Create a new Lego-One SaaS application",
   "type": "module",
   "bin": "./dist/index.cjs",

package/template/.cursor/rules/rules.mdc

@@ -609,9 +609,9 @@ Stay pragmatic. Stay reliable. Keep learning.
 
 ```bash
 # Development
-pnpm run dev:all              # Start host + all plugins
-cd host && pnpm run dev       # Start host only (:8080)
-cd packages/plugins/@lego/plugin-<name> && pnpm run dev  # Start plugin
+pnpm run dev                  # Start host + all plugins (default)
+pnpm run dev:host            # Start host only (:8080) - plugins won't work without their dev servers
+cd packages/plugins/@lego/plugin-<name> && pnpm run dev  # Start specific plugin (requires host running)
 
 # Building
 pnpm run build                # Build entire project

package/template/CLAUDE.md

@@ -604,9 +604,9 @@ Stay pragmatic. Stay reliable. Keep learning.
 
 ```bash
 # Development
-pnpm run dev:all              # Start host + all plugins
-cd host && pnpm run dev       # Start host only (:8080)
-cd packages/plugins/@lego/plugin-<name> && pnpm run dev  # Start plugin
+pnpm run dev                  # Start host + all plugins (default)
+pnpm run dev:host            # Start host only (:8080) - plugins won't work without their dev servers
+cd packages/plugins/@lego/plugin-<name> && pnpm run dev  # Start specific plugin (requires host running)
 
 # Building
 pnpm run build                # Build entire project

package/template/PROMPT.md

@@ -435,9 +435,9 @@ Use the template from `/docs/checkpoints/.template.md`
 **Key Commands:**
 ```bash
 # Development
-pnpm run dev:all              # Start all services
-pnpm run dev:host             # Start host only
-pnpm --filter './packages/plugins/@lego/plugin-<name>' dev
+pnpm run dev                     # Start all services (default)
+pnpm run dev:host               # Start host only - plugins won't work without their dev servers
+pnpm --filter './packages/plugins/@lego/plugin-<name>' dev  # Start specific plugin (requires host running)
 
 # Building
 pnpm run build                # Build all

package/template/docs/framework/setup/02-development-workflow.md

@@ -13,8 +13,8 @@ This guide covers the complete development workflow for Lego-One, including runn
 ## Quick Start Commands
 
 ```bash
-# Start everything (host + all plugins)
-pnpm run dev:all
+# Start everything (host + all plugins) - default
+pnpm run dev
 
 # Start host only
 pnpm run dev:host
@@ -39,6 +39,10 @@ pnpm test:e2e
 ### Running All Services
 
 ```bash
+# Start host and all plugins (default)
+pnpm run dev
+
+# Alternative (same as above)
 pnpm run dev:all
 ```
 
@@ -57,12 +61,16 @@ pnpm run dev:host
 cd host && pnpm run dev
 ```
 
+**Note:** When running host only, plugins will appear in navigation but won't work without their dev servers running. Use `pnpm run dev` (default) to run everything together.
+
 **Dashboard plugin only:**
 ```bash
 cd packages/plugins/@lego/plugin-dashboard
 pnpm run dev
 ```
 
+**Note:** Plugins are micro-frontends that require the host to load them. Running a plugin dev server alone won't work - you need the host running separately.
+
 **Todo plugin only:**
 ```bash
 cd packages/plugins/@lego/plugin-todo

package/template/docs/framework/setup/03-environment-setup.md

@@ -140,8 +140,8 @@ cd pocketbase
 ### Start Application
 
 ```bash
-# Start all services
-pnpm run dev:all
+# Start all services (default)
+pnpm run dev
 
 # Or start host only
 pnpm run dev:host

package/template/docs/framework/setup/04-kernel-architecture.md

@@ -407,7 +407,7 @@ enablePlugin('@lego/plugin-dashboard');
 
 ### Development Mode
 ```bash
-pnpm run dev:all
+pnpm run dev
 ```
 
 - Each plugin runs on **separate dev server**

package/template/docs/framework/setup/05-plugin-system.md

@@ -201,8 +201,8 @@ export default SidebarWidget;
 ### Dev Mode (Separate Servers)
 
 ```bash
-# Each plugin runs independently
-pnpm run dev:all
+# Each plugin runs independently (default)
+pnpm run dev
 
 # Results in:
 # Host:     http://localhost:8080

package/template/docs/framework/setup/README.md

@@ -207,6 +207,10 @@ After first login:
 To run the host and all plugins on separate ports:
 
 ```bash
+# Start everything (default)
+pnpm run dev
+
+# Alternative (same as above)
 pnpm run dev:all
 ```
 

package/template/host/package.json

@@ -1,11 +1,12 @@
 {
   "name": "host",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "modern dev",
-    "build": "modern build",
+    "dev": "node scripts/generate-plugin-manifest.js && modern dev",
+    "build": "node scripts/generate-plugin-manifest.js && modern build",
+    "generate:plugin-manifest": "node scripts/generate-plugin-manifest.js",
     "start": "modern start",
     "lint": "eslint src --ext .ts,.tsx",
     "typecheck": "tsc --noEmit",

package/template/host/scripts/generate-plugin-manifest.js

@@ -0,0 +1,88 @@
+import { readdir, readFile, writeFile } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+/**
+ * Scan plugins directory and extract dev server ports from modern.config.ts files
+ */
+async function scanPlugins() {
+  const pluginsDir = join(__dirname, '../../packages/plugins/@lego');
+  const entries = {};
+
+  try {
+    const pluginDirs = await readdir(pluginsDir, { withFileTypes: true });
+    
+    for (const dirent of pluginDirs) {
+      if (!dirent.isDirectory() || !dirent.name.startsWith('plugin-')) {
+        continue;
+      }
+
+      const pluginName = `@lego/${dirent.name}`;
+      const configPath = join(pluginsDir, dirent.name, 'modern.config.ts');
+
+      try {
+        const configContent = await readFile(configPath, 'utf-8');
+        
+        // Extract port from config (look for port: number)
+        const portMatch = configContent.match(/port:\s*(\d+)/);
+        if (portMatch) {
+          const port = parseInt(portMatch[1], 10);
+          entries[pluginName] = {
+            port,
+            url: `http://localhost:${port}`,
+          };
+        }
+      } catch (error) {
+        console.warn(`[Plugin Scanner] Could not read config for ${pluginName}:`, error);
+      }
+    }
+  } catch (error) {
+    console.error('[Plugin Scanner] Error scanning plugins:', error);
+  }
+
+  return entries;
+}
+
+/**
+ * Generate TypeScript file with plugin dev entries
+ */
+async function generatePluginManifest() {
+  const entries = await scanPlugins();
+  
+  const content = `/**
+ * Auto-generated plugin dev server manifest
+ * This file is generated by scripts/generate-plugin-manifest.js
+ * DO NOT EDIT MANUALLY - Run "pnpm run generate:plugin-manifest" to regenerate
+ */
+
+export const PLUGIN_DEV_ENTRIES: Record<string, string> = ${JSON.stringify(
+    Object.fromEntries(
+      Object.entries(entries).map(([name, { url }]) => [name, url])
+    ),
+    null,
+    2
+  )};
+
+export const PLUGIN_PORTS: Record<string, number> = ${JSON.stringify(
+    Object.fromEntries(
+      Object.entries(entries).map(([name, { port }]) => [name, port])
+    ),
+    null,
+    2
+  )};
+`;
+
+  const outputPath = join(__dirname, '../src/kernel/plugins/plugin-manifest.ts');
+  await writeFile(outputPath, content, 'utf-8');
+
+  console.log(`[Plugin Scanner] ✅ Generated manifest with ${Object.keys(entries).length} plugins`);
+  if (Object.keys(entries).length > 0) {
+    console.log('[Plugin Scanner] Plugins:', Object.keys(entries).join(', '));
+  }
+}
+
+// Run if executed directly
+generatePluginManifest().catch(console.error);

package/template/host/src/kernel/plugins/hooks.ts

@@ -0,0 +1,165 @@
+import { useMemo, useEffect, useState } from 'react';
+import { saasConfig } from '../../saas.config';
+import { usePluginStore } from './store';
+import { PLUGIN_DEV_ENTRIES } from './plugin-manifest';
+
+/**
+ * Plugin route mapping - maps plugin names to their routes
+ * This should match modern.runtime.ts configuration
+ */
+const PLUGIN_ROUTES: Record<string, { path: string; label: string; icon: string }> = {
+  '@lego/plugin-dashboard': {
+    path: '/dashboard',
+    label: 'Dashboard',
+    icon: 'LayoutDashboard',
+  },
+  '@lego/plugin-todo': {
+    path: '/todos',
+    label: 'Todos',
+    icon: 'CheckSquare',
+  },
+};
+
+const isDev = import.meta.env.MODE === 'development';
+
+/**
+ * Check if a plugin dev server is running
+ */
+async function checkPluginServerAvailable(entryUrl: string): Promise<boolean> {
+  try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 2000); // 2 second timeout
+    
+    const response = await fetch(entryUrl, {
+      method: 'GET',
+      signal: controller.signal,
+      cache: 'no-cache',
+    });
+    
+    clearTimeout(timeoutId);
+    // If we get any response (even 404), the server is running
+    return response.status < 500;
+  } catch (error) {
+    // Network error or timeout means server is not running
+    return false;
+  }
+}
+
+/**
+ * Hook to check plugin dev server availability
+ */
+function usePluginAvailability() {
+  const [availability, setAvailability] = useState<Record<string, boolean>>({});
+  const [isChecking, setIsChecking] = useState(true);
+
+  useEffect(() => {
+    if (!isDev) {
+      // In production, all enabled plugins are available (bundled)
+      const allAvailable: Record<string, boolean> = {};
+      saasConfig.plugins.forEach((plugin) => {
+        allAvailable[plugin.name] = plugin.enabled;
+      });
+      setAvailability(allAvailable);
+      setIsChecking(false);
+      return;
+    }
+
+    // In dev mode, check each plugin's dev server
+    const checkAllPlugins = async () => {
+      const results: Record<string, boolean> = {};
+      
+      for (const plugin of saasConfig.plugins) {
+        if (!plugin.enabled) {
+          results[plugin.name] = false;
+          continue;
+        }
+
+        // Get dev server URL for this plugin
+        const devEntry = PLUGIN_DEV_ENTRIES[plugin.name];
+        
+        if (devEntry) {
+          const isAvailable = await checkPluginServerAvailable(devEntry);
+          results[plugin.name] = isAvailable;
+        } else {
+          // Plugin not configured for dev mode
+          results[plugin.name] = false;
+        }
+      }
+
+      setAvailability(results);
+      setIsChecking(false);
+    };
+
+    checkAllPlugins();
+
+    // Poll every 5 seconds to check if servers come online
+    const interval = setInterval(checkAllPlugins, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return { availability, isChecking };
+}
+
+/**
+ * Hook to get enabled plugins with their route information
+ * Only returns plugins that are:
+ * 1. Enabled in saas.config.ts
+ * 2. Have their dev servers running (in dev mode) OR are bundled (in production)
+ */
+export function useEnabledPlugins() {
+  const plugins = usePluginStore((state) => state.plugins);
+  const { availability, isChecking } = usePluginAvailability();
+
+  return useMemo(() => {
+    // Don't filter while checking (to avoid flickering)
+    if (isChecking && isDev) {
+      return [];
+    }
+
+    return saasConfig.plugins
+      .filter((plugin) => {
+        // Only show plugins that are enabled in saas.config.ts
+        if (!plugin.enabled) {
+          return false;
+        }
+        
+        // Check if plugin was explicitly disabled in store (admin override)
+        const pluginState = plugins[plugin.name];
+        if (pluginState && pluginState.enabled === false) {
+          return false;
+        }
+
+        // In dev mode, only show if dev server is available
+        if (isDev) {
+          return availability[plugin.name] === true;
+        }
+
+        // In production, show if enabled
+        return true;
+      })
+      .map((plugin) => {
+        const route = PLUGIN_ROUTES[plugin.name];
+        const pluginState = plugins[plugin.name];
+        
+        return {
+          name: plugin.name,
+          path: route?.path || `/${plugin.name.replace('@lego/plugin-', '')}`,
+          label: route?.label || pluginState?.manifest?.displayName || plugin.name,
+          icon: route?.icon,
+          enabled: plugin.enabled,
+          loaded: pluginState?.loaded || false,
+          available: availability[plugin.name] ?? false,
+          manifest: pluginState?.manifest,
+        };
+      })
+      .filter((plugin) => plugin.path && plugin.label); // Only include plugins with valid routes
+  }, [plugins, availability, isChecking]);
+}
+
+/**
+ * Get plugin route info by name
+ */
+export function getPluginRoute(pluginName: string) {
+  return PLUGIN_ROUTES[pluginName];
+}

package/template/host/src/kernel/plugins/plugin-manifest.ts

@@ -0,0 +1,15 @@
+/**
+ * Auto-generated plugin dev server manifest
+ * This file is generated by scripts/generate-plugin-manifest.js
+ * DO NOT EDIT MANUALLY - Run "pnpm run generate:plugin-manifest" to regenerate
+ */
+
+export const PLUGIN_DEV_ENTRIES: Record<string, string> = {
+  "@lego/plugin-dashboard": "http://localhost:3001",
+  "@lego/plugin-todo": "http://localhost:3002"
+};
+
+export const PLUGIN_PORTS: Record<string, number> = {
+  "@lego/plugin-dashboard": 3001,
+  "@lego/plugin-todo": 3002
+};

package/template/host/src/kernel/providers/PocketBaseProvider.tsx

@@ -20,37 +20,22 @@ export function PocketBaseProvider({ children }: { children: React.ReactNode })
         
         const client = new PocketBase(pbUrl);
 
-        // Test connection by attempting to fetch API info
-        setIsChecking(true);
-        try {
-          // Try to fetch the API root to verify connection
-          const response = await fetch(`${pbUrl}/api/health`, { 
-            method: 'GET',
-            signal: AbortSignal.timeout(5000) // 5 second timeout
-          });
-          
-          if (!response.ok && response.status !== 404) {
-            throw new Error(`PocketBase returned status ${response.status}`);
-          }
-          
-          console.log('[PocketBaseProvider] ✅ PocketBase connection successful');
-        } catch (healthError) {
-          // If health check fails, PocketBase is likely not running
-          const errorMsg = 'PocketBase is not running or not accessible. Please start PocketBase first.';
-          console.error('[PocketBaseProvider] ❌ Connection check failed:', healthError);
-          setError(errorMsg);
-          setIsChecking(false);
-          return;
-        }
+        // Skip health check - let PocketBase SDK handle connection errors naturally
+        // The client will throw errors when actually used if PocketBase is not available
+        setIsChecking(false);
 
         // Load stored token
         const storedToken = localStorage.getItem('pocketbase_auth');
         if (storedToken) {
-          client.authStore.save(storedToken, null);
+          try {
+            client.authStore.save(storedToken, null);
+          } catch (tokenError) {
+            console.warn('[PocketBaseProvider] Failed to restore auth token:', tokenError);
+            localStorage.removeItem('pocketbase_auth');
+          }
         }
 
         setPb(client);
-        setIsChecking(false);
         console.log('[PocketBaseProvider] ✅ PocketBase client initialized');
 
         // Set up auth cleanup on token invalidation

package/template/host/src/layout/Sidebar.tsx

@@ -1,25 +1,44 @@
 import { Link, NavLink } from '@modern-js/runtime/router';
+import { useMemo } from 'react';
 import { useGlobalKernelState } from '../kernel/shared-state';
 import { Slot } from '../kernel/plugins/Slot';
 import { SlotName } from '../kernel/plugins/types';
+import { useEnabledPlugins } from '../kernel/plugins/hooks';
 import {
   Home,
-  LayoutDashboard,
   Settings,
   ChevronLeft,
   ChevronRight,
+  LayoutDashboard,
   CheckSquare,
+  type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../kernel/lib/utils';
 
-const navItems = [
+// Icon mapping for plugin icons
+const iconMap: Record<string, LucideIcon> = {
+  LayoutDashboard,
+  CheckSquare,
+};
+
+// Base navigation items (always shown)
+const baseNavItems = [
   { to: '/', icon: Home, label: 'Home' },
-  { to: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
-  { to: '/todos', icon: CheckSquare, label: 'Todos' },
 ];
 
 export function Sidebar() {
   const { sidebarOpen, toggleSidebar, mobileMenuOpen } = useGlobalKernelState();
+  const enabledPlugins = useEnabledPlugins();
+
+  // Build navigation items: base items + enabled plugins
+  const navItems = useMemo(() => {
+    const pluginNavItems = enabledPlugins.map((plugin) => ({
+      to: plugin.path,
+      icon: plugin.icon ? iconMap[plugin.icon] : LayoutDashboard,
+      label: plugin.label,
+    }));
+    return [...baseNavItems, ...pluginNavItems];
+  }, [enabledPlugins]);
 
   return (
     <>

package/template/host/src/routes/page.tsx

@@ -1,9 +1,17 @@
 import { Link } from '@modern-js/runtime/router';
-import { ArrowRight, LayoutDashboard, CheckSquare, Shield } from 'lucide-react';
+import { ArrowRight, LayoutDashboard, CheckSquare, Shield, type LucideIcon } from 'lucide-react';
 import { useGlobalKernelState } from '../kernel/shared-state';
+import { useEnabledPlugins } from '../kernel/plugins/hooks';
+
+// Icon mapping for plugin icons
+const iconMap: Record<string, LucideIcon> = {
+  LayoutDashboard,
+  CheckSquare,
+};
 
 export default function HomePage() {
   const { isAuthenticated, user } = useGlobalKernelState();
+  const enabledPlugins = useEnabledPlugins();
 
   return (
     <div className="mx-auto max-w-4xl">
@@ -36,40 +44,30 @@ export default function HomePage() {
 
         {/* Features */}
         <div className="grid gap-6 md:grid-cols-3">
-          <div className="rounded-xl border bg-card p-6">
-            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
-              <LayoutDashboard className="h-6 w-6" />
-            </div>
-            <h3 className="mt-4 text-lg font-semibold">Dashboard Plugin</h3>
-            <p className="mt-2 text-sm text-muted-foreground">
-              Overview of your account with stats and quick actions
-            </p>
-            <Link
-              to="/dashboard"
-              className="mt-4 inline-flex items-center text-sm font-medium text-primary hover:underline"
-            >
-              View Dashboard
-              <ArrowRight className="ml-1 h-4 w-4" />
-            </Link>
-          </div>
-
-          <div className="rounded-xl border bg-card p-6">
-            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
-              <CheckSquare className="h-6 w-6" />
-            </div>
-            <h3 className="mt-4 text-lg font-semibold">Todo Plugin</h3>
-            <p className="mt-2 text-sm text-muted-foreground">
-              Manage your tasks with this example plugin
-            </p>
-            <Link
-              to="/todos"
-              className="mt-4 inline-flex items-center text-sm font-medium text-primary hover:underline"
-            >
-              View Todos
-              <ArrowRight className="ml-1 h-4 w-4" />
-            </Link>
-          </div>
+          {/* Dynamic plugin cards - only show enabled plugins */}
+          {enabledPlugins.map((plugin) => {
+            const Icon = plugin.icon ? iconMap[plugin.icon] : LayoutDashboard;
+            return (
+              <div key={plugin.name} className="rounded-xl border bg-card p-6">
+                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                  <Icon className="h-6 w-6" />
+                </div>
+                <h3 className="mt-4 text-lg font-semibold">{plugin.label}</h3>
+                <p className="mt-2 text-sm text-muted-foreground">
+                  {plugin.manifest?.description || `Access the ${plugin.label} plugin`}
+                </p>
+                <Link
+                  to={plugin.path}
+                  className="mt-4 inline-flex items-center text-sm font-medium text-primary hover:underline"
+                >
+                  View {plugin.label}
+                  <ArrowRight className="ml-1 h-4 w-4" />
+                </Link>
+              </div>
+            );
+          })}
 
+          {/* Multi-Tenancy card (always shown) */}
           <div className="rounded-xl border bg-card p-6">
             <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
               <Shield className="h-6 w-6" />

package/template/package.json

@@ -1,13 +1,12 @@
 {
   "name": "lego-one",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "private": true,
   "description": "Microkernel SaaS OS with Modern.js + Garfish + PocketBase",
   "type": "module",
   "scripts": {
-    "dev": "pnpm --filter host dev",
+    "dev": "pnpm --filter host dev & pnpm -r --filter './packages/plugins/@lego/*' dev",
     "dev:host": "pnpm --filter host dev",
-    "dev:plugins": "pnpm -r --filter './packages/plugins/@lego/*' dev",
     "dev:all": "pnpm --filter host dev & pnpm -r --filter './packages/plugins/@lego/*' dev",
     "build": "pnpm --filter host build && pnpm -r --filter './packages/plugins/@lego/*' build",
     "lint": "pnpm -r lint",

package/template/packages/plugins/@lego/plugin-dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lego/plugin-dashboard",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "private": true,
   "type": "module",
   "scripts": {

package/template/packages/plugins/@lego/plugin-todo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lego/plugin-todo",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "private": true,
   "type": "module",
   "scripts": {