create-lego-one 2.0.15 → 2.0.16

package/package.json

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

package/template/host/package.json

@@ -1,6 +1,6 @@
 {
   "name": "host",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "private": true,
   "type": "module",
   "scripts": {

package/template/host/src/bootstrap.tsx

@@ -48,27 +48,32 @@ async function initializePlugins() {
 
 // Create root
 const container = document.getElementById('root');
-if (container) {
-  const root = createRoot(container);
+if (!container) {
+  console.error('[Bootstrap] ❌ Root element not found! Make sure Modern.js generated the HTML file.');
+  throw new Error('Root element (#root) not found in DOM');
+}
 
-  // Initialize plugins
-  initializePlugins();
+const root = createRoot(container);
 
-  root.render(
-    <StrictMode>
-      <BrowserRouter>
-        <ThemeProvider>
-          <QueryProvider>
-            <PocketBaseProvider>
-              <SlotProvider>
-                <ChannelProvider />
-                <App />
-                <Toaster />
-              </SlotProvider>
-            </PocketBaseProvider>
-          </QueryProvider>
-        </ThemeProvider>
-      </BrowserRouter>
-    </StrictMode>
-  );
-}
+// Initialize plugins
+initializePlugins();
+
+console.log('[Bootstrap] ✅ Starting app render...');
+
+root.render(
+  <StrictMode>
+    <BrowserRouter>
+      <ThemeProvider>
+        <QueryProvider>
+          <PocketBaseProvider>
+            <SlotProvider>
+              <ChannelProvider />
+              <App />
+              <Toaster />
+            </SlotProvider>
+          </PocketBaseProvider>
+        </QueryProvider>
+      </ThemeProvider>
+    </BrowserRouter>
+  </StrictMode>
+);

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

@@ -7,38 +7,79 @@ const PocketBaseContext = createContext<PocketBase | null>(null);
 
 export function PocketBaseProvider({ children }: { children: React.ReactNode }) {
   const [pb, setPb] = useState<PocketBase | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isChecking, setIsChecking] = useState(true);
   const { token, clearAuth, setOrganization } = useGlobalKernelState();
 
   useEffect(() => {
-    // Initialize PocketBase client
-    const client = new PocketBase(import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090');
+    async function initializePocketBase() {
+      try {
+        // Initialize PocketBase client
+        const pbUrl = import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090';
+        console.log('[PocketBaseProvider] Initializing with URL:', pbUrl);
+        
+        const client = new PocketBase(pbUrl);
 
-    // Load stored token
-    const storedToken = localStorage.getItem('pocketbase_auth');
-    if (storedToken) {
-      client.authStore.save(storedToken, null);
-    }
-
-    setPb(client);
-
-    // Set up auth cleanup on token invalidation
-    client.authStore.onChange(async (token, model) => {
-      if (!token) {
-        clearAuth();
-        localStorage.removeItem('pocketbase_auth');
-        setOrganization(null);
-      } else {
-        localStorage.setItem('pocketbase_auth', token);
-
-        // Initialize organization on login
-        if (model && !model.organizationId) {
-          const org = await initializeFirstOrganization(client, model.id);
-          if (org) {
-            setOrganization(org);
+        // 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;
+        }
+
+        // Load stored token
+        const storedToken = localStorage.getItem('pocketbase_auth');
+        if (storedToken) {
+          client.authStore.save(storedToken, null);
         }
+
+        setPb(client);
+        setIsChecking(false);
+        console.log('[PocketBaseProvider] ✅ PocketBase client initialized');
+
+        // Set up auth cleanup on token invalidation
+        client.authStore.onChange(async (token, model) => {
+          if (!token) {
+            clearAuth();
+            localStorage.removeItem('pocketbase_auth');
+            setOrganization(null);
+          } else {
+            localStorage.setItem('pocketbase_auth', token);
+
+            // Initialize organization on login
+            if (model && !model.organizationId) {
+              const org = await initializeFirstOrganization(client, model.id);
+              if (org) {
+                setOrganization(org);
+              }
+            }
+          }
+        });
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+        console.error('[PocketBaseProvider] ❌ Failed to initialize:', errorMessage);
+        setError(errorMessage);
+        setIsChecking(false);
       }
-    });
+    }
+
+    initializePocketBase();
 
     return () => {
       // Cleanup on unmount
@@ -52,8 +93,129 @@ export function PocketBaseProvider({ children }: { children: React.ReactNode })
     }
   }, [pb, token]);
 
-  if (!pb) {
-    return null; // or a loading spinner
+  if (error) {
+    const pbUrl = import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090';
+    
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-6">
+        <div className="max-w-2xl rounded-lg border border-destructive bg-card p-8 shadow-lg">
+          <div className="mb-6">
+            <h2 className="text-2xl font-bold text-destructive">⚠️ PocketBase Connection Failed</h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              The application cannot connect to PocketBase. Please follow the setup steps below.
+            </p>
+          </div>
+
+          <div className="mb-6 space-y-4 rounded-lg bg-muted/50 p-4">
+            <div>
+              <h3 className="font-semibold text-foreground">Error Details:</h3>
+              <p className="mt-1 text-sm text-muted-foreground font-mono">{error}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold text-foreground">Expected PocketBase URL:</h3>
+              <code className="mt-1 block rounded bg-background px-3 py-2 text-sm text-foreground">
+                {pbUrl}
+              </code>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <h3 className="mb-3 font-semibold text-foreground">📋 Setup Checklist:</h3>
+            <ol className="ml-6 list-decimal space-y-2 text-sm text-muted-foreground">
+              <li>
+                <strong className="text-foreground">Download PocketBase</strong>
+                <ul className="ml-4 mt-1 list-disc">
+                  <li>Visit: <a href="https://pocketbase.io/docs" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">https://pocketbase.io/docs</a></li>
+                  <li>Download the executable for your platform</li>
+                  <li>Extract it to the <code className="rounded bg-background px-1.5 py-0.5 text-xs">pocketbase/</code> directory</li>
+                </ul>
+              </li>
+              <li>
+                <strong className="text-foreground">Start PocketBase</strong>
+                <ul className="ml-4 mt-1 list-disc">
+                  <li>Open a terminal and navigate to: <code className="rounded bg-background px-1.5 py-0.5 text-xs">cd pocketbase</code></li>
+                  <li>Run: <code className="rounded bg-background px-1.5 py-0.5 text-xs">./pocketbase serve</code> (or <code className="rounded bg-background px-1.5 py-0.5 text-xs">pocketbase.exe serve</code> on Windows)</li>
+                  <li>PocketBase should start on port 8090</li>
+                </ul>
+              </li>
+              <li>
+                <strong className="text-foreground">Configure Environment Variables</strong>
+                <ul className="ml-4 mt-1 list-disc">
+                  <li>Copy <code className="rounded bg-background px-1.5 py-0.5 text-xs">.env.development</code> to <code className="rounded bg-background px-1.5 py-0.5 text-xs">.env</code></li>
+                  <li>Verify <code className="rounded bg-background px-1.5 py-0.5 text-xs">VITE_POCKETBASE_URL</code> matches your PocketBase URL</li>
+                </ul>
+              </li>
+              <li>
+                <strong className="text-foreground">Restart Development Server</strong>
+                <ul className="ml-4 mt-1 list-disc">
+                  <li>Stop the current dev server (Ctrl+C)</li>
+                  <li>Run <code className="rounded bg-background px-1.5 py-0.5 text-xs">pnpm run dev</code> again</li>
+                </ul>
+              </li>
+            </ol>
+          </div>
+
+          <div className="mb-6 rounded-lg border border-blue-500/50 bg-blue-500/10 p-4">
+            <h3 className="mb-2 font-semibold text-blue-600 dark:text-blue-400">💡 Quick Start Commands:</h3>
+            <div className="space-y-2 font-mono text-sm">
+              <div>
+                <span className="text-muted-foreground"># Terminal 1 - Start PocketBase</span>
+                <div className="mt-1 rounded bg-background px-3 py-2 text-foreground">
+                  cd pocketbase<br />
+                  ./pocketbase serve
+                </div>
+              </div>
+              <div>
+                <span className="text-muted-foreground"># Terminal 2 - Start Host</span>
+                <div className="mt-1 rounded bg-background px-3 py-2 text-foreground">
+                  pnpm run dev:host
+                </div>
+              </div>
+              <div>
+                <span className="text-muted-foreground"># Terminal 3 - Start Plugins (optional)</span>
+                <div className="mt-1 rounded bg-background px-3 py-2 text-foreground">
+                  pnpm run dev:all
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex gap-3">
+            <button
+              onClick={() => window.location.reload()}
+              className="flex-1 rounded-lg bg-primary px-4 py-2 font-medium text-primary-foreground hover:bg-primary/90"
+            >
+              🔄 Retry Connection
+            </button>
+            <a
+              href="https://pocketbase.io/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex-1 rounded-lg border border-border bg-background px-4 py-2 text-center font-medium text-foreground hover:bg-accent"
+            >
+              📚 PocketBase Docs
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!pb && !error && isChecking) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <div className="text-center">
+          <div className="mb-4 inline-block h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+          <p className="text-sm text-muted-foreground">Connecting to PocketBase...</p>
+          <p className="mt-2 text-xs text-muted-foreground">
+            Make sure PocketBase is running at{' '}
+            <code className="rounded bg-muted px-1.5 py-0.5">
+              {import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090'}
+            </code>
+          </p>
+        </div>
+      </div>
+    );
   }
 
   return (

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lego-one",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "private": true,
   "description": "Microkernel SaaS OS with Modern.js + Garfish + PocketBase",
   "type": "module",

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

@@ -1,6 +1,6 @@
 {
   "name": "@lego/plugin-dashboard",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "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.15",
+  "version": "2.0.16",
   "private": true,
   "type": "module",
   "scripts": {