nitrostack 1.0.1 → 1.0.2

package/src/studio/app/globals.css

@@ -0,0 +1,410 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Professional Light Theme */
+    --background: 249 250 251;
+    --foreground: 17 24 39;
+    --card: 255 255 255;
+    --card-foreground: 17 24 39;
+    --popover: 255 255 255;
+    --popover-foreground: 17 24 39;
+    --primary: 212 175 55; /* Gold #D4AF37 */
+    --primary-foreground: 17 24 39;
+    --secondary: 243 244 246;
+    --secondary-foreground: 17 24 39;
+    --muted: 243 244 246;
+    --muted-foreground: 107 114 128;
+    --accent: 212 175 55;
+    --accent-foreground: 17 24 39;
+    --destructive: 239 68 68;
+    --destructive-foreground: 255 255 255;
+    --border: 229 231 235;
+    --input: 229 231 235;
+    --ring: 212 175 55;
+    --radius: 0.75rem;
+    --success: 34 197 94;
+    --warning: 251 191 36;
+    --info: 59 130 246;
+  }
+
+  .dark {
+    /* Professional Dark Theme */
+    --background: 9 9 11;
+    --foreground: 250 250 250;
+    --card: 24 24 27;
+    --card-foreground: 250 250 250;
+    --popover: 24 24 27;
+    --popover-foreground: 250 250 250;
+    --primary: 212 175 55; /* Gold #D4AF37 */
+    --primary-foreground: 9 9 11;
+    --secondary: 39 39 42;
+    --secondary-foreground: 250 250 250;
+    --muted: 39 39 42;
+    --muted-foreground: 161 161 170;
+    --accent: 212 175 55;
+    --accent-foreground: 9 9 11;
+    --destructive: 239 68 68;
+    --destructive-foreground: 255 255 255;
+    --border: 39 39 42;
+    --input: 39 39 42;
+    --ring: 212 175 55;
+    --success: 34 197 94;
+    --warning: 251 191 36;
+    --info: 59 130 246;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1, 'ss02' 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code, pre, .font-mono {
+    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold tracking-tight;
+  }
+
+  h1 {
+    @apply text-4xl font-bold;
+  }
+
+  h2 {
+    @apply text-3xl font-bold;
+  }
+
+  h3 {
+    @apply text-2xl font-semibold;
+  }
+}
+
+/* Professional Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--primary) / 0.4);
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--primary) / 0.6);
+  background-clip: content-box;
+}
+
+/* Smooth Transitions */
+* {
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* Professional Card Styles */
+@layer components {
+  .card {
+    @apply rounded-xl border bg-card text-card-foreground;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  }
+
+  .card-hover {
+    @apply card hover:shadow-lg hover:border-primary/50;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .card-hover:hover {
+    transform: translateY(-2px);
+  }
+
+  .card-interactive {
+    @apply card-hover cursor-pointer;
+  }
+
+  /* Professional Button System */
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+    padding: 0.625rem 1.25rem;
+  }
+
+  .btn-primary {
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    @apply shadow-sm hover:opacity-90;
+  }
+
+  .btn-secondary {
+    background: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+    @apply border hover:opacity-80;
+  }
+
+  .btn-ghost {
+    background: transparent;
+    @apply hover:bg-accent;
+  }
+
+  .btn-ghost:hover {
+    color: hsl(var(--accent-foreground));
+  }
+
+  .btn-outline {
+    background: hsl(var(--background));
+    @apply border border-input hover:bg-accent;
+  }
+
+  .btn-outline:hover {
+    color: hsl(var(--accent-foreground));
+  }
+
+  .btn-sm {
+    @apply text-xs;
+    padding: 0.5rem 0.875rem;
+  }
+
+  .btn-lg {
+    @apply text-base;
+    padding: 0.75rem 1.5rem;
+  }
+
+  /* Professional Badge System */
+  .badge {
+    @apply inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors;
+  }
+
+  .badge-primary {
+    @apply bg-primary/10 text-primary ring-1 ring-inset ring-primary/20;
+  }
+
+  .badge-secondary {
+    background: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+  }
+
+  .badge-success {
+    @apply bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20;
+  }
+
+  .dark .badge-success {
+    @apply bg-emerald-500/10 text-emerald-400 ring-emerald-500/20;
+  }
+
+  .badge-warning {
+    @apply bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20;
+  }
+
+  .dark .badge-warning {
+    @apply bg-amber-500/10 text-amber-400 ring-amber-500/20;
+  }
+
+  .badge-error {
+    @apply bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-600/20;
+  }
+
+  .dark .badge-error {
+    @apply bg-rose-500/10 text-rose-400 ring-rose-500/20;
+  }
+
+  /* Professional Input System */
+  .input {
+    @apply flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  .textarea {
+    @apply input min-h-[80px] resize-y;
+  }
+
+  /* Professional Status Indicators */
+  .status-dot {
+    @apply relative flex h-3 w-3 rounded-full;
+  }
+
+  .status-dot::before {
+    content: '';
+    @apply absolute inset-0 rounded-full animate-ping opacity-75;
+  }
+
+  .status-connected {
+    @apply bg-emerald-500;
+  }
+
+  .status-connected::before {
+    @apply bg-emerald-500;
+  }
+
+  .status-connecting {
+    @apply bg-amber-500;
+  }
+
+  .status-connecting::before {
+    @apply bg-amber-500;
+  }
+
+  .status-disconnected {
+    @apply bg-rose-500;
+  }
+
+  .status-disconnected::before {
+    @apply bg-rose-500;
+    animation: none;
+  }
+
+  /* Professional Loading States */
+  .skeleton {
+    @apply animate-pulse rounded-md bg-muted;
+  }
+
+  .shimmer {
+    background: linear-gradient(
+      90deg,
+      hsl(var(--muted)) 0%,
+      hsl(var(--muted) / 0.5) 50%,
+      hsl(var(--muted)) 100%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 1.5s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+}
+
+/* Professional Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.animate-slide-in {
+  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Gold Accent Effects */
+.gold-glow {
+  box-shadow: 0 0 24px rgba(212, 175, 55, 0.15),
+              0 0 12px rgba(212, 175, 55, 0.1);
+}
+
+.dark .gold-glow {
+  box-shadow: 0 0 32px rgba(212, 175, 55, 0.25),
+              0 0 16px rgba(212, 175, 55, 0.15);
+}
+
+/* Glassmorphism Effect */
+.glass {
+  @apply backdrop-blur-xl bg-background/80 border;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+}
+
+.dark .glass {
+  @apply bg-card/60;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+}
+
+/* Professional Hover Effects */
+.hover-lift {
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12),
+              0 8px 16px -4px rgba(0, 0, 0, 0.08);
+}
+
+/* Focus Visible Styles */
+.focus-ring {
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+}
+
+/* Prose/Content Styles */
+.prose {
+  @apply text-foreground;
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *)) {
+  @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *))::before,
+.prose :where(code):not(:where([class~="not-prose"] *))::after {
+  content: '';
+}
+
+/* Empty State */
+.empty-state {
+  @apply flex flex-col items-center justify-center py-12 text-center;
+}
+
+.empty-state-icon {
+  @apply w-16 h-16 text-muted-foreground/50 mb-4;
+}
+
+.empty-state-title {
+  @apply text-lg font-semibold text-foreground mb-2;
+}
+
+.empty-state-description {
+  @apply text-sm text-muted-foreground max-w-md;
+}

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

@@ -0,0 +1,177 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { api } from '@/lib/api';
+import { Activity, RefreshCw, CheckCircle2, AlertTriangle, XCircle, HelpCircle } from 'lucide-react';
+
+interface HealthCheck {
+  name: string;
+  status: 'up' | 'down' | 'degraded';
+  message?: string;
+  details?: any;
+  timestamp?: number;
+}
+
+export default function HealthPage() {
+  const [healthChecks, setHealthChecks] = useState<HealthCheck[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    loadHealth();
+    const interval = setInterval(loadHealth, 30000); // Refresh every 30s
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadHealth = async () => {
+    setLoading(true);
+    try {
+      const data = await api.getHealth();
+      setHealthChecks(data.checks || []);
+    } catch (error) {
+      console.error('Failed to load health checks:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const overallStatus =
+    healthChecks.length === 0
+      ? 'unknown'
+      : healthChecks.every((c) => c.status === 'up')
+      ? '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" />;
+      case 'degraded':
+        return <AlertTriangle className="w-12 h-12 text-amber-500" />;
+      case 'down':
+      case 'unhealthy':
+        return <XCircle className="w-12 h-12 text-rose-500" />;
+      default:
+        return <HelpCircle className="w-12 h-12 text-muted-foreground" />;
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background p-8">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center">
+              <Activity className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-foreground">Health Checks</h1>
+              <p className="text-muted-foreground mt-1">System health monitoring</p>
+            </div>
+          </div>
+          <button onClick={loadHealth} className="btn btn-primary gap-2" disabled={loading}>
+            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+            {loading ? 'Checking...' : 'Refresh'}
+          </button>
+        </div>
+
+        {/* Overall Status */}
+        <div className="card p-8 bg-gradient-to-br from-card to-muted/20">
+          <div className="flex items-center gap-6">
+            {getStatusIcon(overallStatus)}
+            <div>
+              <h2 className="text-3xl font-bold capitalize text-foreground">{overallStatus}</h2>
+              <p className="text-muted-foreground mt-1">
+                {healthChecks.length} health check{healthChecks.length !== 1 ? 's' : ''} configured
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Health Checks Grid */}
+      {loading && healthChecks.length === 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {[1, 2].map((i) => (
+            <div key={i} className="card skeleton h-48"></div>
+          ))}
+        </div>
+      ) : healthChecks.length === 0 ? (
+        <div className="empty-state">
+          <Activity 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">
+          {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'
+                      ? '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'
+                          : check.status === 'degraded'
+                          ? 'badge-warning'
+                          : 'badge-error'
+                      }`}
+                    >
+                      {check.status}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {check.message && (
+                <p className="text-sm text-muted-foreground mb-3">{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>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {check.timestamp && (
+                <p className="text-xs text-muted-foreground mt-3">
+                  Last check: {new Date(check.timestamp).toLocaleString()}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/studio/app/layout.tsx

@@ -0,0 +1,48 @@
+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';
+
+export const metadata: Metadata = {
+  title: 'NitroStack Studio',
+  description: 'Professional development environment for NitroStack servers',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning className="antialiased">
+          <head>
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `
+                  // Force dark mode
+                  document.documentElement.className = 'dark antialiased';
+                `,
+              }}
+            />
+          </head>
+      <body className="min-h-screen font-sans">
+        <div className="flex min-h-screen bg-gradient-to-br from-background via-background to-muted/20">
+          <Sidebar />
+          <main className="flex-1 ml-64">
+            <div className="min-h-screen p-8">
+              {children}
+            </div>
+          </main>
+        </div>
+        {/* Global Modal - Available on all pages */}
+        <EnlargeModal />
+      </body>
+    </html>
+  );
+}