nobalmako 1.0.0

package/src/components/SecurityOverview.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ShieldAlert, ShieldCheck, Clock, AlertTriangle, CheckCircle2 } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+
+interface SecurityOverviewProps {
+  variables: any[];
+  teams: any[];
+}
+
+export function SecurityOverview({ variables, teams }: SecurityOverviewProps) {
+  const secrets = variables.filter(v => v.isSecret);
+  
+  // 1. Stale Secrets (not rotated in 90 days)
+  const ninetyDaysAgo = new Date();
+  ninetyDaysAgo.setDate(ninetyDaysAgo.getDate() - 90);
+  
+  const staleSecrets = secrets.filter(v => 
+    v.lastRotatedAt && new Date(v.lastRotatedAt) < ninetyDaysAgo
+  );
+
+  // 2. Expiring soon (within 7 days)
+  const nextWeek = new Date();
+  nextWeek.setDate(nextWeek.getDate() + 7);
+  
+  const expiringSoon = secrets.filter(v => 
+    v.expiresAt && new Date(v.expiresAt) < nextWeek && new Date(v.expiresAt) > new Date()
+  );
+
+  // 3. Expired
+  const expired = secrets.filter(v => 
+    v.expiresAt && new Date(v.expiresAt) < new Date()
+  );
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <Card className={expired.length > 0 ? "border-destructive/50 bg-destructive/10" : "bg-card"}>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <ShieldAlert className={`h-4 w-4 ${expired.length > 0 ? "text-destructive" : "text-emerald-500"}`} />
+            Expired Secrets
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{expired.length}</div>
+          <p className="text-xs text-muted-foreground mt-1">
+            {expired.length > 0 ? "Action required immediately" : "All secrets are valid"}
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="bg-card">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <Clock className="h-4 w-4 text-amber-500" />
+            Expiring Soon
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{expiringSoon.length}</div>
+          <p className="text-xs text-muted-foreground mt-1">
+            Expiring within the next 7 days
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="bg-card">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <AlertTriangle className="h-4 w-4 text-orange-500" />
+            Stale Secrets
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{staleSecrets.length}</div>
+          <p className="text-xs text-muted-foreground mt-1">
+            Not rotated in over 90 days
+          </p>
+        </CardContent>
+      </Card>
+      
+      {expired.length === 0 && expiringSoon.length === 0 && staleSecrets.length === 0 && (
+        <div className="lg:col-span-3 flex items-center justify-center p-8 bg-emerald-50 border border-emerald-200 rounded-xl text-emerald-700 font-medium gap-2">
+          <CheckCircle2 className="h-5 w-5" />
+          Security health check passed. No issues detected.
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/TeamMembersManager.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { MoreHorizontal, Crown, Shield, User, Trash2, Edit } from "lucide-react";
+import { useTeamMembers } from "@/hooks/use-team-members";
+import { useAuth } from "@/hooks/use-auth";
+import EditMemberDialog from "./EditMemberDialog";
+import RemoveMemberDialog from "./RemoveMemberDialog";
+
+interface TeamMembersManagerProps {
+  teamId: string;
+}
+
+export default function TeamMembersManager({ teamId }: TeamMembersManagerProps) {
+  const { user } = useAuth();
+  const { data: members, isLoading } = useTeamMembers(teamId);
+
+  const getRoleIcon = (role: string) => {
+    switch (role) {
+      case 'owner':
+        return <Crown className="h-4 w-4" />;
+      case 'admin':
+        return <Shield className="h-4 w-4" />;
+      default:
+        return <User className="h-4 w-4" />;
+    }
+  };
+
+  const getRoleBadgeVariant = (role: string) => {
+    switch (role) {
+      case 'owner':
+        return 'default';
+      case 'admin':
+        return 'secondary';
+      default:
+        return 'outline';
+    }
+  };
+
+  if (isLoading) {
+    return <div className="animate-pulse space-y-3">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="flex items-center space-x-3 p-3 border rounded-lg">
+          <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
+          <div className="flex-1 space-y-2">
+            <div className="h-4 bg-gray-200 rounded w-1/4"></div>
+            <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+          </div>
+        </div>
+      ))}
+    </div>;
+  }
+
+  return (
+    <div className="space-y-3">
+      {members?.map((member) => (
+        <div key={member.id} className="flex items-center justify-between p-3 border rounded-lg">
+          <div className="flex items-center space-x-3">
+            <Avatar className="h-10 w-10">
+              <AvatarImage src={member.user.avatar} />
+              <AvatarFallback>
+                {member.user.name.split(' ').map(n => n[0]).join('').toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <div className="flex items-center space-x-2">
+                <span className="font-medium">{member.user.name}</span>
+                <Badge variant={getRoleBadgeVariant(member.role)} className="flex items-center space-x-1">
+                  {getRoleIcon(member.role)}
+                  <span className="capitalize">{member.role}</span>
+                </Badge>
+              </div>
+              <p className="text-sm text-muted-foreground">{member.user.email}</p>
+              <p className="text-xs text-muted-foreground">
+                Joined {new Date(member.joinedAt).toLocaleDateString()}
+              </p>
+            </div>
+          </div>
+
+          {/* Only show actions if user can manage this member and it's not the owner */}
+          {user && (user.id === member.userId || members?.some(m => m.userId === user.id && (m.role === 'owner' || m.role === 'admin'))) && member.role !== 'owner' && (
+            <div className="flex items-center gap-1">
+              <EditMemberDialog teamId={teamId} member={member}>
+                <Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-slate-500 hover:text-slate-900">
+                  <Edit className="h-4 w-4" />
+                </Button>
+              </EditMemberDialog>
+              
+              <RemoveMemberDialog teamId={teamId} member={member}>
+                <Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-destructive hover:text-destructive hover:bg-destructive/10">
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </RemoveMemberDialog>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/VariableHistoryDialog.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { History, Eye, EyeOff, User, Clock, ChevronRight, Hash, Database, Shield, RotateCcw, AlertTriangle } from "lucide-react";
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Separator } from "@/components/ui/separator";
+import { toast } from "sonner";
+
+interface VariableHistoryDialogProps {
+  variableId: string;
+  variableKey: string;
+  children?: React.ReactNode;
+}
+
+interface HistoryEntry {
+  id: string;
+  key: string;
+  value: string;
+  description?: string;
+  isSecret: boolean;
+  changeType: 'create' | 'update' | 'delete';
+  createdAt: string;
+  changer: {
+    id: string;
+    name: string;
+    email: string;
+  };
+}
+
+export default function VariableHistoryDialog({ variableId, variableKey, children }: VariableHistoryDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [visibleValues, setVisibleValues] = useState<Set<string>>(new Set());
+  const queryClient = useQueryClient();
+
+  const { data: history, isLoading } = useQuery({
+    queryKey: ['variable-history', variableId],
+    queryFn: async (): Promise<HistoryEntry[]> => {
+      const response = await fetch(`/api/variable-history?variableId=${variableId}`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch variable history');
+      }
+      const data = await response.json();
+      return data.history || [];
+    },
+    enabled: open,
+  });
+
+  const rollbackMutation = useMutation({
+    mutationFn: async (historyId: string) => {
+      const response = await fetch('/api/variable-history', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ historyId }),
+      });
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to rollback');
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      toast.success('Variable rolled back successfully');
+      queryClient.invalidateQueries({ queryKey: ['variables'] });
+      queryClient.invalidateQueries({ queryKey: ['variable-history', variableId] });
+    },
+    onError: (error: any) => {
+      toast.error(error.message);
+    }
+  });
+
+  const toggleValueVisibility = (entryId: string) => {
+    const newVisible = new Set(visibleValues);
+    if (newVisible.has(entryId)) {
+      newVisible.delete(entryId);
+    } else {
+      newVisible.add(entryId);
+    }
+    setVisibleValues(newVisible);
+  };
+
+  const getChangeTypeColor = (changeType: string) => {
+    switch (changeType) {
+      case 'create':
+        return 'bg-emerald-100 text-emerald-800 border-emerald-200';
+      case 'update':
+        return 'bg-blue-100 text-blue-800 border-blue-200';
+      case 'delete':
+        return 'bg-rose-100 text-rose-800 border-rose-200';
+      default:
+        return 'bg-slate-100 text-slate-800 border-slate-200';
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-primary/5 hover:text-primary transition-colors">
+            <History className="h-4 w-4 text-muted-foreground" />
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[750px] p-0 overflow-hidden shadow-2xl flex flex-col max-h-[85vh]">
+        <DialogHeader className="p-6 bg-slate-50 border-b border-slate-200 shrink-0">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg text-primary">
+              <Clock className="h-6 w-6" />
+            </div>
+            <div>
+              <DialogTitle className="text-xl flex items-center gap-2">
+                Audit Logs: <code className="text-primary bg-primary/10 px-2 py-0.5 rounded text-base">{variableKey}</code>
+              </DialogTitle>
+              <DialogDescription className="text-primary/60">
+                Tracking all historical changes and cryptographic rotations.
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden flex flex-col">
+          <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/10 hover:scrollbar-thumb-muted-foreground/20">
+            <div className="p-6 space-y-6">
+              {isLoading ? (
+                <div className="space-y-4">
+                  {[...Array(4)].map((_, i) => (
+                    <div key={i} className="animate-pulse flex gap-4">
+                      <div className="h-10 w-10 bg-muted rounded-full shrink-0" />
+                      <div className="flex-1 space-y-2 py-1">
+                        <div className="h-4 bg-muted rounded w-1/4" />
+                        <div className="h-20 bg-muted/50 rounded w-full" />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : history && history.length > 0 ? (
+                <div className="space-y-8 relative before:absolute before:left-[19px] before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-100">
+                  {history.map((entry) => (
+                    <div key={entry.id} className="relative pl-12">
+                      <div className={`absolute left-0 top-1 h-10 w-10 rounded-full border-4 border-white flex items-center justify-center ${
+                        entry.changeType === 'create' ? 'bg-emerald-500 text-white' : 
+                        entry.changeType === 'delete' ? 'bg-rose-500 text-white' : 
+                        'bg-blue-500 text-white'
+                      }`}>
+                         {entry.changeType === 'create' ? <Database className="h-4 w-4" /> : 
+                          entry.changeType === 'delete' ? <Hash className="h-4 w-4" /> : 
+                          <Shield className="h-4 w-4" />}
+                      </div>
+
+                      <div className="bg-slate-50 border border-slate-100 rounded-xl overflow-hidden hover:border-slate-200 transition-all hover:shadow-sm">
+                        <div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between bg-slate-100/30">
+                          <div className="flex items-center gap-3">
+                             <Badge variant="outline" className={`px-2 py-0 rounded font-mono text-[10px] uppercase tracking-tighter border-slate-200 ${getChangeTypeColor(entry.changeType)}`}>
+                              {entry.changeType}
+                             </Badge>
+                             <div className="flex items-center gap-1.5 text-xs font-medium text-slate-500">
+                                <User className="h-3 w-3" />
+                                {entry.changer.name}
+                             </div>
+                          </div>
+                          <div className="text-[11px] text-slate-400 flex items-center gap-1">
+                            <Clock className="h-3 w-3 opacity-50" />
+                            {new Date(entry.createdAt).toLocaleString()}
+                          </div>
+                          {entry.changeType !== 'delete' && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 text-[10px] gap-1 px-2 text-primary hover:bg-primary/10"
+                              onClick={() => {
+                                if (confirm('Are you sure you want to rollback to this version?')) {
+                                  rollbackMutation.mutate(entry.id);
+                                }
+                              }}
+                              disabled={rollbackMutation.isPending}
+                            >
+                              <RotateCcw className="h-3 w-3" />
+                              Restore
+                            </Button>
+                          )}
+                        </div>
+
+                        <div className="p-4 space-y-4">
+                          <div className="flex items-center gap-3">
+                             <code className="text-sm font-bold text-slate-800 bg-white px-2 py-1 rounded border border-slate-200 shadow-sm">{entry.key}</code>
+                             <Badge variant={entry.isSecret ? "destructive" : "outline"} className={`text-[10px] ${!entry.isSecret ? 'text-primary border-primary/20' : ''}`}>
+                               {entry.isSecret ? "SECRET" : "PUBLIC"}
+                             </Badge>
+                          </div>
+
+                          {entry.description && (
+                            <p className="text-xs text-slate-500 leading-relaxed italic border-l-2 border-slate-100 pl-3">
+                              &ldquo;{entry.description}&rdquo;
+                            </p>
+                          )}
+
+                          <div className="bg-slate-50 rounded-lg p-3 border border-slate-100">
+                            <div className="flex items-center justify-between mb-2">
+                               <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1.5">
+                                 <Hash className="h-3 w-3" />
+                                 Captured Value
+                               </span>
+                               {entry.isSecret && (
+                                <Button 
+                                  variant="ghost" 
+                                  size="sm" 
+                                  onClick={() => toggleValueVisibility(entry.id)}
+                                  className="h-6 px-2 text-[10px] hover:bg-primary/5 hover:text-primary"
+                                >
+                                  {visibleValues.has(entry.id) ? (
+                                    <><EyeOff className="h-3 w-3 mr-1" /> Hide</>
+                                  ) : (
+                                    <><Eye className="h-3 w-3 mr-1" /> Reveal</>
+                                  )}
+                                </Button>
+                              )}
+                            </div>
+                            <div className="font-mono text-xs overflow-x-auto">
+                              {entry.isSecret ? (
+                                visibleValues.has(entry.id) ? (
+                                  <span className="text-foreground break-all">{entry.value}</span>
+                                ) : (
+                                  <span className="text-muted-foreground/30 tracking-[0.3em]">••••••••••••••••</span>
+                                )
+                              ) : (
+                                <span className="text-foreground break-all">{entry.value}</span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="py-20 flex flex-col items-center justify-center text-center">
+                   <div className="p-4 bg-muted rounded-full mb-4">
+                     <History className="h-8 w-8 text-muted-foreground opacity-20" />
+                   </div>
+                   <h3 className="text-lg font-semibold text-muted-foreground">No History Found</h3>
+                   <p className="text-sm text-muted-foreground/60 max-w-[200px]">Initial creation records or manual edits will appear here.</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="p-4 bg-muted/20 border-t border-muted shrink-0 flex justify-end">
+          <Button variant="ghost" onClick={() => setOpen(false)} className="text-muted-foreground">
+            Close History
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/WebhooksManager.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Trash2, Plus, Webhook as WebhookIcon, Shield } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface Webhook {
+  id: string;
+  name: string;
+  url: string;
+  events: string[];
+}
+
+export function WebhooksManager({ teamId }: { teamId: string }) {
+  const [webhooks, setWebhooks] = useState<Webhook[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isAdding, setIsAdding] = useState(false);
+  const [formData, setFormData] = useState({ name: '', url: '', secret: '' });
+
+  useEffect(() => {
+    fetchWebhooks();
+  }, [teamId]);
+
+  async function fetchWebhooks() {
+    try {
+      const res = await fetch(`/api/webhooks?teamId=${teamId}`);
+      if (res.ok) {
+        const data = await res.json();
+        setWebhooks(data.webhooks);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleAdd() {
+    if (!formData.name || !formData.url) return;
+
+    try {
+      const res = await fetch('/api/webhooks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...formData, teamId }),
+      });
+
+      if (res.ok) {
+        toast.success('Webhook added successfully');
+        setFormData({ name: '', url: '', secret: '' });
+        setIsAdding(false);
+        fetchWebhooks();
+      } else {
+        toast.error('Failed to add webhook');
+      }
+    } catch (error) {
+      toast.error('An error occurred');
+    }
+  }
+
+  async function handleDelete(id: string) {
+    if (!confirm('Are you sure you want to delete this webhook?')) return;
+
+    try {
+      const res = await fetch('/api/webhooks', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id }),
+      });
+
+      if (res.ok) {
+        toast.success('Webhook deleted');
+        fetchWebhooks();
+      }
+    } catch (error) {
+      toast.error('Failed to delete webhook');
+    }
+  }
+
+  return (
+    <Card className="mt-8">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0">
+        <div>
+          <CardTitle className="text-xl font-bold flex items-center gap-2">
+            <WebhookIcon className="h-5 w-5" />
+            Webhooks
+          </CardTitle>
+          <CardDescription>
+            Notify external services when environment variables change.
+          </CardDescription>
+        </div>
+        <Button size="sm" onClick={() => setIsAdding(!isAdding)}>
+          <Plus className="h-4 w-4 mr-1" />
+          Add Webhook
+        </Button>
+      </CardHeader>
+      <CardContent>
+        {isAdding && (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 p-4 border rounded-lg bg-muted/20">
+            <div className="space-y-2">
+              <label className="text-xs font-semibold uppercase opacity-70">Name</label>
+              <Input 
+                placeholder="Discord/Slack Webhook" 
+                value={formData.name}
+                onChange={e => setFormData(f => ({ ...f, name: e.target.value }))}
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-xs font-semibold uppercase opacity-70">Endpoint URL</label>
+              <Input 
+                placeholder="https://hooks.example.com/..." 
+                value={formData.url}
+                onChange={e => setFormData(f => ({ ...f, url: e.target.value }))}
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-xs font-semibold uppercase opacity-70">Secret (Optional)</label>
+              <Input 
+                placeholder="HMAC Signing Secret" 
+                type="password"
+                value={formData.secret}
+                onChange={e => setFormData(f => ({ ...f, secret: e.target.value }))}
+              />
+            </div>
+            <div className="md:col-span-3 flex justify-end gap-2">
+              <Button variant="ghost" size="sm" onClick={() => setIsAdding(false)}>Cancel</Button>
+              <Button size="sm" onClick={handleAdd}>Save Webhook</Button>
+            </div>
+          </div>
+        )}
+
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>URL</TableHead>
+              <TableHead>Events</TableHead>
+              <TableHead className="w-16"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow><TableCell colSpan={4} className="text-center">Loading...</TableCell></TableRow>
+            ) : webhooks.length === 0 ? (
+              <TableRow><TableCell colSpan={4} className="text-center opacity-50">No webhooks configured</TableCell></TableRow>
+            ) : webhooks.map((w) => (
+              <TableRow key={w.id}>
+                <TableCell className="font-medium">{w.name}</TableCell>
+                <TableCell className="max-w-[200px] truncate opacity-70">{w.url}</TableCell>
+                <TableCell>
+                  <div className="flex gap-1">
+                    {w.events.map(e => <span key={e} className="text-[10px] bg-primary/10 text-primary px-1.5 py-0.5 rounded border border-primary/20">{e}</span>)}
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <Button variant="ghost" size="icon" className="text-destructive h-8 w-8" onClick={() => handleDelete(w.id)}>
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}