nitrostack 1.0.70 → 1.0.72

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

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { api } from '@/lib/api';
-import { Activity, RefreshCw, CheckCircle2, AlertTriangle, XCircle, HelpCircle } from 'lucide-react';
+import { HeartIcon, ArrowPathIcon, CheckCircleIcon, ExclamationTriangleIcon, XCircleIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
 
 interface HealthCheck {
   name: string;
@@ -38,47 +38,40 @@ export default function HealthPage() {
     healthChecks.length === 0
       ? 'unknown'
       : healthChecks.every((c) => c.status === 'up')
-      ? 'healthy'
-      : healthChecks.some((c) => c.status === 'down')
-      ? 'unhealthy'
-      : 'degraded';
+        ? 'healthy'
+        : healthChecks.some((c) => c.status === 'down')
+          ? 'unhealthy'
+          : 'degraded';
 
   const getStatusIcon = (status: string) => {
     switch (status) {
       case 'up':
       case 'healthy':
-        return <CheckCircle2 className="w-12 h-12 text-emerald-500" />;
+        return <CheckCircleIcon className="w-12 h-12 text-emerald-500" />;
       case 'degraded':
-        return <AlertTriangle className="w-12 h-12 text-amber-500" />;
+        return <ExclamationTriangleIcon className="w-12 h-12 text-status-warning" />;
       case 'down':
       case 'unhealthy':
-        return <XCircle className="w-12 h-12 text-rose-500" />;
+        return <XCircleIcon className="w-12 h-12 text-rose-500" />;
       default:
-        return <HelpCircle className="w-12 h-12 text-muted-foreground" />;
+        return <QuestionMarkCircleIcon className="w-12 h-12 text-muted-foreground" />;
     }
   };
 
   return (
     <div className="fixed inset-0 flex flex-col bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
-      {/* Sticky Header */}
-      <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-3 flex items-center justify-between bg-card/80 backdrop-blur-md shadow-sm">
-        <div className="flex items-center gap-3">
-          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-md">
-            <Activity className="w-5 h-5 text-white" strokeWidth={2.5} />
-          </div>
-          <div>
-            <h1 className="text-lg font-bold text-foreground">Health</h1>
-          </div>
-        </div>
-        <button onClick={loadHealth} className="btn btn-primary text-sm px-4 py-2 gap-2" disabled={loading}>
-          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
-          {loading ? 'Checking...' : 'Refresh'}
+      {/* Minimal Professional Header */}
+      <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-4 flex items-center justify-between bg-card/50 backdrop-blur-sm">
+        <h1 className="text-lg font-semibold text-foreground">Health</h1>
+        <button onClick={loadHealth} className="btn btn-primary text-sm px-4 py-2 gap-2">
+          <ArrowPathIcon className="h-4 w-4" />
+          Refresh
         </button>
       </div>
 
-      {/* Content - ONLY this scrolls */}
+      {/* Content */}
       <div className="flex-1 overflow-y-auto overflow-x-hidden">
-        <div className="max-w-4xl mx-auto px-6 py-6">
+        <div className="max-w-5xl mx-auto px-6 py-6">
           {/* Overall Status */}
           <div className="card p-8 bg-gradient-to-br from-card to-muted/20 mb-6">
             <div className="flex items-center gap-6">
@@ -101,79 +94,82 @@ export default function HealthPage() {
             </div>
           ) : healthChecks.length === 0 ? (
             <div className="empty-state">
-              <Activity className="empty-state-icon" />
+              <HeartIcon className="empty-state-icon" />
               <p className="empty-state-title">No health checks configured</p>
               <p className="empty-state-description">
                 Add health checks using the @HealthCheck decorator
               </p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {healthChecks.map((check) => (
-                <div key={check.name} className="card card-hover p-6 animate-fade-in">
-                  <div className="flex items-start justify-between mb-4">
-                    <div className="flex items-center gap-3">
-                      <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
-                        check.status === 'up'
+                <div key={check.name} className="group relative bg-card/50 border border-border/50 rounded-xl p-5 transition-all duration-200 hover:bg-card hover:border-border hover:shadow-lg animate-fade-in">
+                  {/* Gradient hover effect */}
+                  <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+
+                  <div className="relative">
+                    <div className="flex items-start justify-between mb-3">
+                      <div className="flex items-center gap-3">
+                        <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${check.status === 'up'
                           ? 'bg-emerald-500/10'
                           : check.status === 'degraded'
-                          ? 'bg-amber-500/10'
-                          : 'bg-rose-500/10'
-                      }`}>
-                        {check.status === 'up' ? (
-                          <CheckCircle2 className="w-6 h-6 text-emerald-500" />
-                        ) : check.status === 'degraded' ? (
-                          <AlertTriangle className="w-6 h-6 text-amber-500" />
-                        ) : (
-                          <XCircle className="w-6 h-6 text-rose-500" />
-                        )}
-                      </div>
-                      <div>
-                        <h3 className="font-semibold capitalize text-foreground">{check.name}</h3>
-                        <span
-                          className={`badge text-xs mt-1 ${
-                            check.status === 'up'
-                              ? 'badge-success'
+                            ? 'bg-yellow-500/10'
+                            : 'bg-rose-500/10'
+                          }`}>
+                          {check.status === 'up' ? (
+                            <CheckCircleIcon className="w-4 h-4 text-emerald-500" />
+                          ) : check.status === 'degraded' ? (
+                            <ExclamationTriangleIcon className="w-4 h-4 text-yellow-500" />
+                          ) : (
+                            <XCircleIcon className="w-4 h-4 text-rose-500" />
+                          )}
+                        </div>
+                        <div>
+                          <h3 className="text-sm font-medium capitalize text-foreground">{check.name}</h3>
+                          <span
+                            className={`text-[10px] font-medium px-2 py-0.5 rounded-full ${check.status === 'up'
+                              ? 'bg-emerald-500/10 text-emerald-500'
                               : check.status === 'degraded'
-                              ? 'badge-warning'
-                              : 'badge-error'
-                          }`}
-                        >
-                          {check.status}
-                        </span>
+                                ? 'bg-yellow-500/10 text-yellow-500'
+                                : 'bg-rose-500/10 text-rose-500'
+                              }`}
+                          >
+                            {check.status}
+                          </span>
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  {check.message && (
-                    <p className="text-sm text-muted-foreground mb-3">{check.message}</p>
-                  )}
+                    {check.message && (
+                      <p className="text-xs text-muted-foreground/80 mb-3 leading-relaxed">{check.message}</p>
+                    )}
 
-                  {check.details && (
-                    <div className="mt-3 p-4 bg-muted/30 rounded-lg border border-border">
-                      <p className="text-xs font-semibold text-muted-foreground mb-3 uppercase tracking-wide">Details</p>
-                      <div className="space-y-2">
-                        {Object.entries(check.details).map(([key, value]) => (
-                          <div key={key} className="flex justify-between text-sm">
-                            <span className="text-muted-foreground capitalize">{key}:</span>
-                            <span className="text-foreground font-mono font-medium">{String(value)}</span>
-                          </div>
-                        ))}
+                    {check.details && (
+                      <div className="mt-3 p-3 bg-muted/20 rounded-lg border border-border/50">
+                        <p className="text-[10px] font-medium text-muted-foreground mb-2 uppercase tracking-wider">Details</p>
+                        <div className="space-y-1.5">
+                          {Object.entries(check.details).map(([key, value]) => (
+                            <div key={key} className="flex justify-between text-xs">
+                              <span className="text-muted-foreground/70 capitalize">{key}:</span>
+                              <span className="text-foreground font-mono">{String(value)}</span>
+                            </div>
+                          ))}
+                        </div>
                       </div>
-                    </div>
-                  )}
+                    )}
 
-                  {check.timestamp && (
-                    <p className="text-xs text-muted-foreground mt-3">
-                      Last check: {new Date(check.timestamp).toLocaleString()}
-                    </p>
-                  )}
+                    {check.timestamp && (
+                      <p className="text-[10px] text-muted-foreground/60 mt-3">
+                        Last check: {new Date(check.timestamp).toLocaleString()}
+                      </p>
+                    )}
+                  </div>
                 </div>
               ))}
             </div>
           )}
         </div>
       </div>
-      </div>
+    </div>
   );
 }

package/src/studio/app/layout.tsx

@@ -1,13 +1,10 @@
 import type { Metadata } from 'next';
 import './globals.css';
-import '@fontsource/inter/400.css';
-import '@fontsource/inter/500.css';
-import '@fontsource/inter/600.css';
-import '@fontsource/inter/700.css';
 import '@fontsource/jetbrains-mono/400.css';
 import '@fontsource/jetbrains-mono/500.css';
 import { Sidebar } from '@/components/Sidebar';
 import { EnlargeModal } from '@/components/EnlargeModal';
+import { SplashScreen } from '@/components/SplashScreen';
 
 export const metadata: Metadata = {
   title: 'NitroStudio - MCP Development Suite',
@@ -26,17 +23,18 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning className="antialiased">
-          <head>
-            <script
-              dangerouslySetInnerHTML={{
-                __html: `
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
                   // Force dark mode
                   document.documentElement.className = 'dark antialiased';
                 `,
-              }}
-            />
-          </head>
+          }}
+        />
+      </head>
       <body className="min-h-screen font-sans">
+        <SplashScreen />
         <div className="flex min-h-screen bg-gradient-to-br from-background via-background to-muted/20">
           <Sidebar />
           <main className="flex-1 transition-all duration-300 ease-in-out" style={{ marginLeft: 'var(--sidebar-width, 15rem)' }}>

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState, useRef } from 'react';
-import { Terminal, Download, Copy, Trash2, Play, Pause, Filter } from 'lucide-react';
+import { CommandLineIcon, ArrowDownTrayIcon, ClipboardDocumentIcon, TrashIcon, PlayIcon, PauseIcon, FunnelIcon } from '@heroicons/react/24/outline';
 
 interface LogEntry {
   timestamp: string;
@@ -17,12 +17,13 @@ export default function LogsPage() {
   const [filter, setFilter] = useState<string>('all');
   const [error, setError] = useState<string | null>(null);
   const logsEndRef = useRef<HTMLDivElement>(null);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
   const eventSourceRef = useRef<EventSource | null>(null);
 
-  // Auto-scroll to bottom
+  // Auto-scroll to bottom of logs container only
   useEffect(() => {
-    if (autoScroll && logsEndRef.current) {
-      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    if (autoScroll && logsContainerRef.current) {
+      logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight;
     }
   }, [logs, autoScroll]);
 
@@ -63,10 +64,10 @@ export default function LogsPage() {
   };
 
   const downloadLogs = () => {
-    const logsText = logs.map(log => 
+    const logsText = logs.map(log =>
       `[${log.timestamp}] [${log.level.toUpperCase()}] ${log.message}${log.data ? '\n' + JSON.stringify(log.data, null, 2) : ''}`
     ).join('\n\n');
-    
+
     const blob = new Blob([logsText], { type: 'text/plain' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -77,10 +78,10 @@ export default function LogsPage() {
   };
 
   const copyLogs = async () => {
-    const logsText = logs.map(log => 
+    const logsText = logs.map(log =>
       `[${log.timestamp}] [${log.level.toUpperCase()}] ${log.message}${log.data ? '\n' + JSON.stringify(log.data, null, 2) : ''}`
     ).join('\n\n');
-    
+
     await navigator.clipboard.writeText(logsText);
     // Could add a toast notification here
   };
@@ -89,8 +90,8 @@ export default function LogsPage() {
     setIsStreaming(!isStreaming);
   };
 
-  const filteredLogs = filter === 'all' 
-    ? logs 
+  const filteredLogs = filter === 'all'
+    ? logs
     : logs.filter(log => log.level === filter);
 
   const getLevelColor = (level: string) => {
@@ -120,12 +121,12 @@ export default function LogsPage() {
   };
 
   return (
-    <div className="flex flex-col h-screen bg-black">
+    <div className="fixed inset-0 flex flex-col bg-black" style={{ left: 'var(--sidebar-width, 15rem)' }}>
       {/* Header */}
       <div className="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 border-b border-slate-700">
         <div className="flex items-center gap-3">
           <div className="p-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
-            <Terminal className="w-5 h-5 text-emerald-400" />
+            <CommandLineIcon className="w-5 h-5 text-emerald-400" />
           </div>
           <div>
             <h1 className="text-xl font-bold text-white">Server Logs</h1>
@@ -150,11 +151,10 @@ export default function LogsPage() {
           {/* Auto-scroll toggle */}
           <button
             onClick={() => setAutoScroll(!autoScroll)}
-            className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-              autoScroll
-                ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'
-                : 'bg-slate-800 text-slate-400 border border-slate-700 hover:bg-slate-700'
-            }`}
+            className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${autoScroll
+              ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'
+              : 'bg-slate-800 text-slate-400 border border-slate-700 hover:bg-slate-700'
+              }`}
           >
             Auto-scroll
           </button>
@@ -162,14 +162,13 @@ export default function LogsPage() {
           {/* Streaming toggle */}
           <button
             onClick={toggleStreaming}
-            className={`p-2 rounded-lg transition-colors ${
-              isStreaming
-                ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'
-                : 'bg-slate-800 text-slate-400 border border-slate-700 hover:bg-slate-700'
-            }`}
+            className={`p-2 rounded-lg transition-colors ${isStreaming
+              ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'
+              : 'bg-slate-800 text-slate-400 border border-slate-700 hover:bg-slate-700'
+              }`}
             title={isStreaming ? 'Pause streaming' : 'Resume streaming'}
           >
-            {isStreaming ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+            {isStreaming ? <PauseIcon className="w-4 h-4" /> : <PlayIcon className="w-4 h-4" />}
           </button>
 
           {/* Copy */}
@@ -178,7 +177,7 @@ export default function LogsPage() {
             className="p-2 bg-slate-800 border border-slate-700 rounded-lg text-slate-400 hover:bg-slate-700 hover:text-white transition-colors"
             title="Copy logs"
           >
-            <Copy className="w-4 h-4" />
+            <ClipboardDocumentIcon className="w-4 h-4" />
           </button>
 
           {/* Download */}
@@ -187,7 +186,7 @@ export default function LogsPage() {
             className="p-2 bg-slate-800 border border-slate-700 rounded-lg text-slate-400 hover:bg-slate-700 hover:text-white transition-colors"
             title="Download logs"
           >
-            <Download className="w-4 h-4" />
+            <ArrowDownTrayIcon className="w-4 h-4" />
           </button>
 
           {/* Clear */}
@@ -196,7 +195,7 @@ export default function LogsPage() {
             className="p-2 bg-slate-800 border border-slate-700 rounded-lg text-slate-400 hover:bg-red-900/50 hover:text-red-400 hover:border-red-500/30 transition-colors"
             title="Clear logs"
           >
-            <Trash2 className="w-4 h-4" />
+            <TrashIcon className="w-4 h-4" />
           </button>
         </div>
       </div>
@@ -226,11 +225,11 @@ export default function LogsPage() {
         </div>
       </div>
 
-      {/* Logs Container */}
-      <div className="flex-1 overflow-y-auto bg-black font-mono text-sm">
+      {/* Logs Container - Only this scrolls */}
+      <div ref={logsContainerRef} className="flex-1 overflow-y-auto bg-black font-mono text-sm">
         {filteredLogs.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-slate-600">
-            <Terminal className="w-16 h-16 mb-4 opacity-20" />
+            <CommandLineIcon className="w-16 h-16 mb-4 opacity-20" />
             <p className="text-lg font-medium">No logs yet</p>
             <p className="text-sm">Logs will appear here as they are generated</p>
           </div>
@@ -257,7 +256,7 @@ export default function LogsPage() {
                   {/* Message */}
                   <div className="flex-1">
                     <p className="text-white break-words">{log.message}</p>
-                    
+
                     {/* Data (if present) */}
                     {log.data && (
                       <pre className="mt-2 p-3 bg-black/50 rounded border border-slate-800 overflow-x-auto">