nobalmako 1.0.0

package/src/components/MFASettings.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ShieldCheck, ShieldAlert, Copy, Check } from 'lucide-react';
+import { toast } from 'sonner';
+
+export function MFASettings({ initialEnabled }: { initialEnabled: boolean }) {
+  const [enabled, setEnabled] = useState(initialEnabled);
+  const [setupData, setSetupData] = useState<{ qrCode: string; secret: string } | null>(null);
+  const [token, setToken] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  async function handleSetup() {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/auth/mfa/setup', { method: 'POST' });
+      if (res.ok) {
+        const data = await res.json();
+        setSetupData(data);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleVerify() {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/auth/mfa/verify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token }),
+      });
+
+      if (res.ok) {
+        toast.success('MFA Enabled successfully');
+        setEnabled(true);
+        setSetupData(null);
+      } else {
+        toast.error('Invalid token');
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const copySecret = () => {
+    if (setupData) {
+      navigator.clipboard.writeText(setupData.secret);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+      toast.success('Secret copied');
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <ShieldCheck className={`h-5 w-5 ${enabled ? 'text-emerald-500' : 'text-muted-foreground'}`} />
+          Multi-Factor Authentication
+        </CardTitle>
+        <CardDescription>
+          Add an extra layer of security to your account using a TOTP authenticator app.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {enabled ? (
+          <div className="flex items-center justify-between p-4 bg-emerald-500/5 border border-emerald-500/20 rounded-lg">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-emerald-500/10 rounded-full">
+                <ShieldCheck className="h-5 w-5 text-emerald-500" />
+              </div>
+              <div>
+                <p className="font-semibold text-emerald-700">MFA is active</p>
+                <p className="text-sm text-emerald-600/70">Your account is protected with 2FA.</p>
+              </div>
+            </div>
+            <Button variant="outline" size="sm" className="text-destructive border-destructive/20 hover:bg-destructive/5" disabled>Disable</Button>
+          </div>
+        ) : setupData ? (
+          <div className="space-y-6 animate-in fade-in duration-300">
+            <div className="flex flex-col md:flex-row gap-6 items-center">
+              <div className="bg-white p-2 rounded-lg border">
+                <img src={setupData.qrCode} alt="MFA QR Code" className="w-40 h-40" />
+              </div>
+              <div className="space-y-4 flex-1">
+                <p className="text-sm text-muted-foreground">
+                  1. Scan this QR code with your authenticator app (like Google Authenticator or 1Password).
+                </p>
+                <div className="space-y-2">
+                  <Label>Or enter secret manually:</Label>
+                  <div className="flex gap-2">
+                    <code className="bg-muted px-3 py-2 rounded flex-1 text-xs font-mono break-all">{setupData.secret}</code>
+                    <Button variant="ghost" size="icon" onClick={copySecret}>
+                      {copied ? <Check className="h-4 w-4 text-emerald-500" /> : <Copy className="h-4 w-4" />}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="space-y-2 pt-4 border-t">
+              <Label htmlFor="mfa-token">2. Enter the 6-digit code from your app</Label>
+              <div className="flex gap-2">
+                <Input 
+                  id="mfa-token" 
+                  placeholder="000000" 
+                  value={token} 
+                  onChange={e => setToken(e.target.value)}
+                  className="max-w-[200px]"
+                />
+                <Button onClick={handleVerify} disabled={loading || token.length !== 6}>
+                  {loading ? 'Verifying...' : 'Enable MFA'}
+                </Button>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-6 text-center border-2 border-dashed rounded-lg">
+            <ShieldAlert className="h-10 w-10 text-muted-foreground/30 mb-3" />
+            <p className="text-muted-foreground mb-4">MFA is not yet configured for your account.</p>
+            <Button onClick={handleSetup} disabled={loading}>
+              Setup MFA
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ProjectDiff.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Columns, ArrowRight, Minus, Plus, Equal } from 'lucide-react';
+
+interface Variable {
+  id: string;
+  key: string;
+  value: string;
+  environmentId: string;
+}
+
+interface ProjectDiffProps {
+  environments: any[];
+  variables: Variable[];
+}
+
+export function ProjectDiff({ environments, variables }: ProjectDiffProps) {
+  const [envA, setEnvA] = useState(environments[0]?.id || "");
+  const [envB, setEnvB] = useState(environments[1]?.id || "");
+
+  const varsA = variables.filter(v => v.environmentId === envA);
+  const varsB = variables.filter(v => v.environmentId === envB);
+
+  const allKeys = Array.from(new Set([...varsA.map(v => v.key), ...varsB.map(v => v.key)])).sort();
+
+  const getStatus = (key: string) => {
+    const vA = varsA.find(v => v.key === key);
+    const vB = varsB.find(v => v.key === key);
+
+    if (vA && !vB) return 'missing_in_b';
+    if (!vA && vB) return 'missing_in_a';
+    if (vA?.value !== vB?.value) return 'different';
+    return 'same';
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-xl font-bold flex items-center gap-2">
+              <Columns className="h-5 w-5" />
+              Environment Comparison
+            </CardTitle>
+            <CardDescription>
+              Compare keys and values side-by-side across environments.
+            </CardDescription>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <div className="space-y-2">
+            <label className="text-xs font-semibold uppercase opacity-70">Source Environment</label>
+            <Select value={envA} onValueChange={setEnvA}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select environment" />
+              </SelectTrigger>
+              <SelectContent>
+                {environments.map(e => <SelectItem key={e.id} value={e.id}>{e.name}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <label className="text-xs font-semibold uppercase opacity-70">Target Environment</label>
+            <Select value={envB} onValueChange={setEnvB}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select environment" />
+              </SelectTrigger>
+              <SelectContent>
+                {environments.map(e => <SelectItem key={e.id} value={e.id}>{e.name}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Variable Key</TableHead>
+              <TableHead>Source Value</TableHead>
+              <TableHead className="w-8"></TableHead>
+              <TableHead>Target Value</TableHead>
+              <TableHead className="text-right">Status</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {allKeys.map(key => {
+              const vA = varsA.find(v => v.key === key);
+              const vB = varsB.find(v => v.key === key);
+              const status = getStatus(key);
+
+              return (
+                <TableRow key={key} className={status === 'different' ? 'bg-amber-500/5' : ''}>
+                  <TableCell className="font-mono font-medium">{key}</TableCell>
+                  <TableCell className="opacity-70 font-mono text-xs max-w-[150px] truncate">
+                    {vA ? (vA.value.length > 20 ? vA.value.substring(0, 20) + '...' : vA.value) : <span className="text-destructive">-</span>}
+                  </TableCell>
+                  <TableCell>
+                    <ArrowRight className="h-3 w-3 opacity-30" />
+                  </TableCell>
+                  <TableCell className="opacity-70 font-mono text-xs max-w-[150px] truncate">
+                    {vB ? (vB.value.length > 20 ? vB.value.substring(0, 20) + '...' : vB.value) : <span className="text-destructive">-</span>}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {status === 'missing_in_b' && <Badge variant="outline" className="border-destructive/30 text-destructive bg-destructive/5"><Minus className="h-3 w-3 mr-1" /> Missing</Badge>}
+                    {status === 'missing_in_a' && <Badge variant="outline" className="border-primary/30 text-primary bg-primary/5"><Plus className="h-3 w-3 mr-1" /> New</Badge>}
+                    {status === 'different' && <Badge variant="outline" className="border-amber-500/30 text-amber-600 bg-amber-500/5">Modified</Badge>}
+                    {status === 'same' && <Badge variant="outline" className="opacity-30 border-transparent"><Equal className="h-3 w-3 mr-1" /> Identical</Badge>}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/Providers.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState } from 'react'
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60, // 1 minute
+            retry: 1,
+          },
+        },
+      })
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  )
+}

package/src/components/RemoveMemberDialog.tsx

@@ -0,0 +1,112 @@
+
+'use client';
+
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Trash2, UserMinus, AlertTriangle } from "lucide-react";
+
+interface RemoveMemberDialogProps {
+  teamId: string;
+  member: {
+    id: string;
+    user: {
+      name: string;
+      email: string;
+    };
+  };
+  children?: React.ReactNode;
+}
+
+export default function RemoveMemberDialog({ teamId, member, children }: RemoveMemberDialogProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [open, setOpen] = useState(false);
+  const queryClient = useQueryClient();
+
+  const handleRemove = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/team-members', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ teamId, memberId: member.id }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        queryClient.invalidateQueries({ queryKey: ["team-members", teamId] });
+      } else {
+        setError(data.error || "Failed to remove member");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        {children || (
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-destructive hover:text-destructive hover:bg-destructive/10">
+            <UserMinus className="h-4 w-4" />
+          </Button>
+        )}
+      </AlertDialogTrigger>
+      <AlertDialogContent className="bg-white border-slate-200 sm:max-w-[450px]">
+        <AlertDialogHeader>
+          <div className="flex items-center gap-3 text-destructive mb-2">
+            <div className="p-2 bg-destructive/10 rounded-full">
+              <AlertTriangle className="h-6 w-6" />
+            </div>
+            <AlertDialogTitle className="text-xl">Remove Member</AlertDialogTitle>
+          </div>
+          <AlertDialogDescription className="text-slate-600 text-sm leading-relaxed">
+            Are you sure you want to remove <span className="font-semibold text-slate-900">{member.user.name}</span> from this project? 
+            They will lose all access to secrets and environments in this project immediately.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        {error && (
+          <div className="mt-4 p-3 text-sm font-medium text-destructive bg-destructive/10 rounded-lg border border-destructive/20 text-center">
+            {error}
+          </div>
+        )}
+
+        <AlertDialogFooter className="mt-6">
+          <AlertDialogCancel className="border-slate-200 hover:bg-slate-50 text-slate-700">
+            Cancel
+          </AlertDialogCancel>
+          <Button
+            onClick={handleRemove}
+            disabled={isLoading}
+            variant="destructive"
+            className="bg-destructive hover:bg-destructive/90 text-white min-w-[120px]"
+          >
+            {isLoading ? "Removing..." : "Remove Member"}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/SearchDialog.tsx

@@ -0,0 +1,276 @@
+'use client';
+
+import { useState, useEffect, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Search, X, Shield, Globe, Database, Command, ChevronRight } from "lucide-react";
+import { useTeams } from "@/hooks/use-teams";
+import { useEnvironments } from "@/hooks/use-environments";
+import { useVariables } from "@/hooks/use-variables";
+import { Badge } from "@/components/ui/badge";
+
+interface SearchDialogProps {
+  children?: React.ReactNode;
+}
+
+interface SearchResult {
+  type: 'team' | 'environment' | 'variable';
+  id: string;
+  name: string;
+  description?: string;
+  teamName?: string;
+  environmentName?: string;
+  isSecret?: boolean;
+  teamId?: string;
+  environmentId?: string;
+}
+
+export default function SearchDialog({ children }: SearchDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const router = useRouter();
+  const { teams } = useTeams();
+  const { environments } = useEnvironments();
+  const { variables } = useVariables();
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((open) => !open);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  const results = useMemo(() => {
+    if (!query.trim()) {
+      return [];
+    }
+
+    const searchTerm = query.toLowerCase();
+    const searchResults: SearchResult[] = [];
+
+    // Search teams
+    teams?.forEach(team => {
+      if (team.name.toLowerCase().includes(searchTerm) ||
+          team.description?.toLowerCase().includes(searchTerm)) {
+        searchResults.push({
+          type: 'team',
+          id: team.id,
+          name: team.name,
+          description: team.description || undefined,
+        });
+      }
+    });
+
+    // Search environments
+    environments?.forEach(env => {
+      if (env.name.toLowerCase().includes(searchTerm) ||
+          env.description?.toLowerCase().includes(searchTerm)) {
+        searchResults.push({
+          type: 'environment',
+          id: env.id,
+          name: env.name,
+          description: env.description || undefined,
+          teamName: env.teamName,
+          teamId: env.teamId,
+        });
+      }
+    });
+
+    // Search variables
+    variables?.forEach(variable => {
+      if (variable.key.toLowerCase().includes(searchTerm) ||
+          variable.description?.toLowerCase().includes(searchTerm)) {
+        searchResults.push({
+          type: 'variable',
+          id: variable.id,
+          name: variable.key,
+          description: variable.description || undefined,
+          teamName: variable.teamName,
+          environmentName: variable.environmentName,
+          isSecret: variable.isSecret,
+          teamId: variable.teamId,
+          environmentId: variable.environmentId,
+        });
+      }
+    });
+
+    return searchResults.slice(0, 20); // Limit to 20 results
+  }, [query, teams, environments, variables]);
+
+  const handleResultClick = (result: SearchResult) => {
+    setOpen(false);
+    setQuery("");
+
+    // Navigate to the appropriate page
+    if (result.type === 'team') {
+      router.push(`/project/${result.id}`);
+    } else if (result.type === 'environment' || result.type === 'variable') {
+      router.push(`/project/${result.teamId}`);
+    }
+  };
+
+  const getResultIcon = (type: string) => {
+    switch (type) {
+      case 'team':
+        return <Shield className="h-4 w-4 text-primary" />;
+      case 'environment':
+        return <Globe className="h-4 w-4 text-blue-500" />;
+      case 'variable':
+        return <Database className="h-4 w-4 text-emerald-500" />;
+      default:
+        return <Command className="h-4 w-4" />;
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button variant="outline" className="relative h-10 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64 border-primary/10 hover:border-primary/30 transition-all font-mono">
+            <Search className="h-4 w-4 mr-2 text-primary/50" />
+            <span className="inline-flex">Search...</span>
+            <kbd className="pointer-events-none absolute right-[0.4rem] top-[0.4rem] hidden h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+                <span className="text-xs">⌘</span>K
+            </kbd>
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[650px] p-0 overflow-hidden shadow-2xl flex flex-col max-h-[80vh]">
+        <DialogHeader className="p-4 border-b border-slate-200">
+          <div className="flex items-center gap-2">
+            <div className="p-1.5 bg-primary/10 rounded-md">
+               <Command className="h-5 w-5 text-primary" />
+            </div>
+            <DialogTitle className="text-base font-semibold">Command Palette</DialogTitle>
+          </div>
+        </DialogHeader>
+
+        <div className="p-4 bg-slate-50 border-b border-slate-100">
+          <div className="relative group">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-slate-400 group-focus-within:text-primary transition-colors" />
+            <Input
+              autoFocus
+              placeholder="Search keys, environments, or projects..."
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="h-12 pl-11 bg-white border-slate-200 focus-visible:ring-primary/20 text-base text-slate-900 placeholder:text-slate-400"
+            />
+            {query && (
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                onClick={() => setQuery("")}
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0"
+              >
+                <X className="h-4 w-4 opacity-40 hover:opacity-100" />
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <div className="flex-1 min-h-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/10 hover:scrollbar-thumb-muted-foreground/20">
+          <div className="p-2 space-y-1">
+            {results.length > 0 ? (
+              <>
+                <div className="px-3 py-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Search Results</div>
+                {results.map((result) => (
+                  <button
+                    key={`${result.type}-${result.id}`}
+                    onClick={() => handleResultClick(result)}
+                    className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-all group border border-transparent hover:border-slate-100"
+                  >
+                    <div className="flex items-center gap-4 text-left overflow-hidden">
+                      <div className="p-2 bg-slate-50 rounded-md group-hover:bg-primary/5 transition-colors">
+                        {getResultIcon(result.type)}
+                      </div>
+                      <div className="flex flex-col gap-0.5 overflow-hidden">
+                        <div className="flex items-center gap-2">
+                          <span className="font-semibold text-sm text-slate-900 truncate">{result.name}</span>
+                          <Badge variant="outline" className="text-[9px] uppercase tracking-tighter px-1 h-4 font-mono font-normal border-slate-200">
+                            {result.type}
+                          </Badge>
+                          {result.isSecret && (
+                            <Badge variant="destructive" className="text-[8px] h-3 px-1 leading-none">SECURE</Badge>
+                          )}
+                        </div>
+                        <div className="text-xs text-slate-500 truncate max-w-[400px]">
+                          {result.type === 'team' ? (
+                            result.description || "Project Space"
+                          ) : (
+                            <div className="flex items-center gap-1">
+                               <span className="font-medium text-slate-600">{result.teamName}</span>
+                               {result.environmentName && (
+                                 <>
+                                   <ChevronRight className="h-3 w-3 opacity-40 text-slate-400" />
+                                   <span className="text-primary/70">{result.environmentName}</span>
+                                 </>
+                               )}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <ChevronRight className="h-4 w-4 opacity-0 group-hover:opacity-40 transition-all mr-2" />
+                  </button>
+                ))}
+              </>
+            ) : query.trim() ? (
+              <div className="py-20 flex flex-col items-center justify-center text-center opacity-50">
+                 <div className="p-4 bg-muted rounded-full mb-4">
+                   <Search className="h-8 w-8" />
+                 </div>
+                 <h3 className="text-base font-semibold">No results found</h3>
+                 <p className="text-sm">We couldn&apos;t find anything matching &ldquo;{query}&rdquo;</p>
+              </div>
+            ) : (
+              <div className="py-12 flex flex-col items-center justify-center text-center opacity-40">
+                 <Command className="h-10 w-10 mb-4 animate-pulse text-primary" />
+                 <h3 className="text-sm font-medium">Type to search everything</h3>
+                 <p className="text-xs mt-1">Projects, environments, secrets, keys...</p>
+                 <div className="mt-8 grid grid-cols-3 gap-8">
+                    <div className="flex flex-col items-center gap-1.5 grayscale opacity-50">
+                       <Shield className="h-5 w-5" />
+                       <span className="text-[10px] font-bold">PROJECTS</span>
+                    </div>
+                    <div className="flex flex-col items-center gap-1.5 grayscale opacity-50">
+                       <Globe className="h-5 w-5" />
+                       <span className="text-[10px] font-bold">ENVS</span>
+                    </div>
+                    <div className="flex flex-col items-center gap-1.5 grayscale opacity-50">
+                       <Database className="h-5 w-5" />
+                       <span className="text-[10px] font-bold">KEYS</span>
+                    </div>
+                 </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="p-3 bg-muted/30 border-t border-muted text-[10px] text-muted-foreground flex items-center justify-between">
+           <div className="flex items-center gap-4 ml-2">
+              <span className="flex items-center gap-1">
+                <kbd className="px-1 border rounded bg-background shadow-xs">↵</kbd> Select
+              </span>
+              <span className="flex items-center gap-1">
+                <kbd className="px-1 border rounded bg-background shadow-xs">↑↓</kbd> Navigate
+              </span>
+           </div>
+           <span className="mr-2">ESC to close</span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}