nitrostack 1.0.65 → 1.0.67

package/src/studio/app/globals.css

@@ -0,0 +1,486 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Nitrocloud Light Theme - Following Branding Guidelines */
+    --background: 0 0% 100%;
+    /* #FFFFFF */
+    --foreground: 222.2 84% 4.9%;
+    /* #020617 - Near black */
+    --card: 0 0% 100%;
+    /* #FFFFFF */
+    --card-foreground: 222.2 84% 4.9%;
+    /* #020617 */
+    --popover: 0 0% 100%;
+    /* #FFFFFF */
+    --popover-foreground: 222.2 84% 4.9%;
+    /* #020617 */
+    --primary: 217 91% 60%;
+    /* #3B9FFF - Nitrocloud Blue */
+    --primary-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --secondary: 210 40% 96.1%;
+    /* #F1F5F9 */
+    --secondary-foreground: 222.2 84% 4.9%;
+    /* #020617 */
+    --muted: 210 40% 96.1%;
+    /* #F1F5F9 */
+    --muted-foreground: 215.4 16.3% 46.9%;
+    /* #64748B */
+    --accent: 217 91% 60%;
+    /* #3B9FFF - Nitrocloud Blue */
+    --accent-foreground: 222.2 84% 4.9%;
+    /* #020617 */
+    --destructive: 0 84.2% 60.2%;
+    /* #EF4444 */
+    --destructive-foreground: 0 0% 100%;
+    /* #FFFFFF */
+    --border: 214.3 31.8% 91.4%;
+    /* #E2E8F0 */
+    --input: 214.3 31.8% 91.4%;
+    /* #E2E8F0 */
+    --ring: 217 91% 60%;
+    /* #3B9FFF - Nitrocloud Blue */
+    --radius: 0.75rem;
+    /* 12px - Global default */
+    --success: 142.1 76.2% 36.3%;
+    /* #22C55E */
+    --warning: 38 92% 50%;
+    /* #F59E0B */
+    --info: 217 91% 60%;
+    /* #3B9FFF */
+
+    /* Nitrocloud Gradient */
+    --nitrocloud-gradient-start: 217 91% 60%;
+    /* Blue */
+    --nitrocloud-gradient-end: 221 83% 53%;
+    /* Deep Blue-Purple */
+  }
+
+  .dark {
+    /* Nitrocloud Dark Theme - Following Branding Guidelines */
+    --background: 222.2 84% 4.9%;
+    /* #020617 - Deep dark blue */
+    --foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --card: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --card-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --popover: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --popover-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --primary: 217 91% 60%;
+    /* #3B9FFF - Brighter in dark */
+    --primary-foreground: 222.2 47.4% 11.2%;
+    /* #0F172A */
+    --secondary: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --secondary-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --muted: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --muted-foreground: 215 20.2% 65.1%;
+    /* #94A3B8 */
+    --accent: 217 91% 60%;
+    /* #3B9FFF */
+    --accent-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --destructive: 0 62.8% 30.6%;
+    /* #991B1B */
+    --destructive-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --border: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --input: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --ring: 217 91% 60%;
+    /* #3B9FFF */
+    --success: 142.1 70.6% 45.3%;
+    /* #10B981 */
+    --warning: 38 92% 50%;
+    /* #F59E0B */
+    --info: 217 91% 60%;
+    /* #3B9FFF */
+  }
+
+  * {
+    @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);
+}
+
+/* Nitrocloud Brand Gradient */
+.nitrocloud-gradient {
+  background: linear-gradient(135deg,
+      hsl(var(--nitrocloud-gradient-start)),
+      hsl(var(--nitrocloud-gradient-end)));
+}
+
+.nitrocloud-text-gradient {
+  background: linear-gradient(135deg,
+      hsl(var(--nitrocloud-gradient-start)),
+      hsl(var(--nitrocloud-gradient-end)));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Nitrocloud Blue Glow Effects */
+.nitrocloud-glow {
+  box-shadow: 0 0 24px rgba(59, 159, 255, 0.15),
+    0 0 12px rgba(59, 159, 255, 0.1);
+}
+
+.dark .nitrocloud-glow {
+  box-shadow: 0 0 32px rgba(59, 159, 255, 0.25),
+    0 0 16px rgba(59, 159, 255, 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,179 @@
+'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="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'}
+        </button>
+      </div>
+
+      {/* Content - ONLY this scrolls */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        <div className="max-w-4xl 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">
+              {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>
+
+          {/* 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>
+      </div>
+      </div>
+  );
+}