nitrostack 1.0.75 → 1.0.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitrostack",
-  "version": "1.0.75",
+  "version": "1.0.77",
   "description": "NitroStack - Build powerful MCP servers with TypeScript",
   "type": "module",
   "main": "dist/core/index.js",

package/src/studio/app/auth/callback/page.tsx

@@ -103,9 +103,9 @@ function OAuthCallback() {
           setStatus('success');
           setMessage('Authorization successful! Redirecting...');
 
-          // Redirect back to auth page after 2 seconds
+          // Redirect back to settings auth tab after 2 seconds
           setTimeout(() => {
-            router.push('/auth');
+            router.push('/settings?tab=auth');
           }, 2000);
         } else {
           setStatus('error');
@@ -147,10 +147,10 @@ function OAuthCallback() {
             <h1 className="text-2xl font-bold text-foreground mb-2">Authorization Failed</h1>
             <p className="text-muted-foreground mb-4">{message}</p>
             <button
-              onClick={() => router.push('/auth')}
+              onClick={() => router.push('/settings?tab=auth')}
               className="btn btn-primary"
             >
-              Back to Auth Page
+              Back to Settings
             </button>
           </>
         )}

package/src/studio/app/auth/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
+
+function AuthRedirect() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    // Preserve any query parameters that might be relevant
+    const params = new URLSearchParams();
+    params.set('tab', 'auth');
+    
+    // Forward any existing params (like success messages)
+    searchParams.forEach((value, key) => {
+      if (key !== 'tab') {
+        params.set(key, value);
+      }
+    });
+
+    router.replace(`/settings?${params.toString()}`);
+  }, [router, searchParams]);
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
+      <div className="text-center">
+        <ArrowPathIcon className="w-8 h-8 text-primary animate-spin mx-auto mb-4" />
+        <p className="text-muted-foreground">Redirecting to authentication settings...</p>
+      </div>
+    </div>
+  );
+}
+
+export default function AuthPage() {
+  return (
+    <Suspense fallback={
+      <div className="fixed inset-0 flex items-center justify-center bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
+        <div className="text-center">
+          <ArrowPathIcon className="w-8 h-8 text-primary animate-spin mx-auto mb-4" />
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    }>
+      <AuthRedirect />
+    </Suspense>
+  );
+}
+

package/src/studio/app/settings/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { api } from '@/lib/api';
 import { useStudioStore } from '@/lib/store';
 import {
@@ -23,7 +24,9 @@ import {
   ChatBubbleLeftIcon,
 } from '@heroicons/react/24/outline';
 
-export default function SettingsPage() {
+function SettingsContent() {
+  const searchParams = useSearchParams();
+  
   // Auth State
   const { oauthState, setOAuthState } = useStudioStore();
   const initialServerUrl =
@@ -236,7 +239,11 @@ export default function SettingsPage() {
     }
   };
 
-  const [activeTab, setActiveTab] = useState<'general' | 'chat' | 'auth' | 'ping'>('general');
+  // Get initial tab from URL query param
+  const initialTab = searchParams.get('tab') as 'general' | 'chat' | 'auth' | 'ping' | null;
+  const [activeTab, setActiveTab] = useState<'general' | 'chat' | 'auth' | 'ping'>(
+    initialTab && ['general', 'chat', 'auth', 'ping'].includes(initialTab) ? initialTab : 'general'
+  );
   const [transport, setTransport] = useState<'stdio' | 'http'>('stdio');
   const {
     connection,
@@ -1153,3 +1160,18 @@ export default function SettingsPage() {
     </div>
   );
 }
+
+export default function SettingsPage() {
+  return (
+    <Suspense fallback={
+      <div className="fixed inset-0 flex items-center justify-center bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
+        <div className="text-center">
+          <SettingsIcon className="w-8 h-8 text-muted-foreground animate-pulse mx-auto mb-4" />
+          <p className="text-muted-foreground">Loading settings...</p>
+        </div>
+      </div>
+    }>
+      <SettingsContent />
+    </Suspense>
+  );
+}

package/src/studio/components/WidgetRenderer.tsx

@@ -24,13 +24,15 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
 
   // Minimum height to prevent collapse
   const MIN_HEIGHT = 50;
+  // Maximum height to prevent infinite growth (widgets using 100vh can cause feedback loops)
+  const MAX_HEIGHT = 2000;
 
-  // Stable handler for resize messages - no max height limit
+  // Stable handler for resize messages
   const handleResize = useCallback((height: number) => {
     if (!mountedRef.current) return;
     if (height && typeof height === 'number' && height > 0) {
-      // Allow widget to be any height it needs
-      const newHeight = Math.max(MIN_HEIGHT, height);
+      // Clamp height between min and max to prevent infinite growth
+      const newHeight = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, height));
       setContentHeight(newHeight);
     }
   }, []);

package/templates/typescript-oauth/README.md

@@ -46,8 +46,6 @@ nitrostack init my-flight-app --template typescript-oauth
 cd my-flight-app
 
 # Install all dependencies (root + widgets)
-npm install
-# or
 nitrostack install
 ```
 

package/templates/typescript-oauth/package.json

@@ -5,7 +5,6 @@
   "type": "module",
   "description": "NitroStack Flight Booking - Real-time flight search and booking with Duffel API integration",
   "scripts": {
-    "postinstall": "nitrostack install --skip-widgets || true",
     "dev": "nitrostack dev",
     "build": "nitrostack build",
     "start": "npm run build && nitrostack start",

package/templates/typescript-pizzaz/README.md

@@ -42,8 +42,6 @@ nitrostack init my-pizza-app --template typescript-pizzaz
 cd my-pizza-app
 
 # Install all dependencies (root + widgets)
-npm install
-# or
 nitrostack install
 ```
 

package/templates/typescript-pizzaz/package.json

@@ -5,7 +5,6 @@
   "type": "module",
   "description": "NitroStack Pizza Shop Finder - Interactive map widgets with Mapbox integration",
   "scripts": {
-    "postinstall": "nitrostack install --skip-widgets || true",
     "dev": "nitrostack dev",
     "build": "nitrostack build",
     "start": "npm run build && nitrostack start",

package/templates/typescript-pizzaz/src/widgets/app/pizza-list/page.tsx

@@ -117,8 +117,8 @@ export default function PizzaListWidget() {
     return (
         <div style={{
             background: isDark ? '#0a0a0a' : '#f9fafb',
-            minHeight: '100vh',
-            maxHeight: maxHeight || '100vh',
+            minHeight: '400px',
+            maxHeight: maxHeight || '600px',
             overflow: 'auto',
         }}>
             {/* Header */}

package/templates/typescript-pizzaz/src/widgets/app/pizza-shop/page.tsx

@@ -71,8 +71,8 @@ export default function PizzaShopWidget() {
     return (
         <div style={{
             background: isDark ? '#0a0a0a' : '#f9fafb',
-            minHeight: '100vh',
-            maxHeight: maxHeight || '100vh',
+            minHeight: '500px',
+            maxHeight: maxHeight || '800px',
             overflow: 'auto',
         }}>
             {/* Hero Image */}

package/templates/typescript-starter/README.md

@@ -34,8 +34,6 @@ nitrostack init my-calculator --template typescript-starter
 cd my-calculator
 
 # Install all dependencies (root + widgets)
-npm install
-# or
 nitrostack install
 ```
 

package/templates/typescript-starter/package.json

@@ -5,7 +5,6 @@
   "type": "module",
   "description": "NitroStack starter template - Learn MCP server basics with a simple calculator example",
   "scripts": {
-    "postinstall": "nitrostack install --skip-widgets || true",
     "dev": "nitrostack dev",
     "build": "nitrostack build",
     "start": "npm run build && nitrostack start",

package/templates/typescript-starter/src/modules/calculator/calculator.tools.ts

@@ -114,7 +114,7 @@ export class CalculatorTools {
         fs.writeFileSync(filePath, buffer);
         ctx.logger.info(`Saved file to ${filePath}`);
       } catch (e) {
-        ctx.logger.error('Failed to save file', e);
+        ctx.logger.error('Failed to save file', { error: e instanceof Error ? e.message : String(e) });
       }
     }