modulo de agente pessoal de IA

src/index.css

@@ -31,6 +31,12 @@
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
 
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+
+    --warning: 38 92% 50%;
+    --warning-foreground: 222 47% 11%;
+
     --border: 214 32% 91%;
     --input: 214 32% 91%;
     --ring: 190 100% 45%;
@@ -84,6 +90,12 @@
     --destructive: 0 84% 60%;
     --destructive-foreground: 200 100% 95%;
 
+    --success: 142 71% 45%;
+    --success-foreground: 222 47% 5%;
+
+    --warning: 38 92% 50%;
+    --warning-foreground: 222 47% 5%;
+
     --border: 222 30% 18%;
     --input: 222 30% 18%;
     --ring: 190 100% 50%;
@@ -137,7 +149,7 @@
 
 @layer components {
   .glass-effect {
-    @apply bg-card/40 backdrop-blur-xl border border-border/50;
+    @apply bg-card/80 backdrop-blur-xl border border-border/50;
   }
 
   .cyber-glow {
@@ -152,4 +164,63 @@
   .gradient-text {
     @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
   }
+
+  .metric-card {
+    @apply bg-card rounded-xl p-5 border border-border shadow-sm transition-all duration-300 hover:shadow-md hover:border-primary/30;
+  }
+
+  .nav-item {
+    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 w-full;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+  }
+  
+  .nav-item svg,
+  .nav-item .w-5 {
+    flex-shrink: 0;
+  }
+  
+  .nav-item span {
+    white-space: nowrap;
+  }
+
+  .nav-item-inactive {
+    @apply text-muted-foreground hover:text-foreground hover:bg-sidebar-accent;
+  }
+
+  .nav-item-active {
+    @apply text-primary bg-sidebar-accent font-medium;
+  }
+
+  .status-dot {
+    @apply w-2 h-2 rounded-full;
+  }
+
+  .status-connected {
+    @apply bg-success;
+    box-shadow: 0 0 8px hsl(var(--success) / 0.6);
+    animation: pulse 2s infinite;
+  }
+
+  .status-error {
+    @apply bg-destructive;
+    box-shadow: 0 0 8px hsl(var(--destructive) / 0.6);
+    animation: pulse 2s infinite;
+  }
+
+  .status-warning {
+    @apply bg-warning;
+    box-shadow: 0 0 8px hsl(var(--warning) / 0.6);
+    animation: pulse 2s infinite;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
 }