nobalmako 1.0.0

package/src/app/api-keys/APIKeysClient.tsx

@@ -0,0 +1,316 @@
+'use client';
+
+import { useState } from "react";
+import Link from "next/link";
+import AppLayout from "@/components/AppLayout";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Plus, Key, Copy, Trash2, Calendar, Shield, Clock, Check, AlertCircle, ArrowRight } from "lucide-react";
+import { useApiKeys } from "@/hooks/use-api-keys";
+import { useTeams } from "@/hooks/use-teams";
+import { format } from "date-fns";
+import { toast } from "sonner";
+
+export default function APIKeysClient() {
+  const { apiKeys, isLoading, createApiKey, deleteApiKey } = useApiKeys();
+  const { teams } = useTeams();
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [newKeyData, setNewKeyData] = useState({
+    name: "",
+    teamId: "personal",
+    expiresAt: "",
+  });
+  const [createdKey, setCreatedKey] = useState<string | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+
+  const handleCreate = async () => {
+    if (!newKeyData.name) {
+      toast.error("Please enter a name for the API key");
+      return;
+    }
+
+    setIsCreating(true);
+    try {
+      const result = await createApiKey({
+        name: newKeyData.name,
+        teamId: newKeyData.teamId === "personal" ? undefined : newKeyData.teamId,
+        expiresAt: newKeyData.expiresAt || undefined,
+      });
+      setCreatedKey(result.apiKey);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to create API key");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    toast.success("Copied to clipboard");
+  };
+
+  const handleDelete = async (id: string) => {
+    if (confirm("Are you sure you want to delete this API key?")) {
+      try {
+        await deleteApiKey(id);
+        toast.success("API key deleted");
+      } catch (error) {
+        toast.error("Failed to delete API key");
+      }
+    }
+  };
+
+  return (
+    <AppLayout>
+      <div className="space-y-8 max-w-5xl mx-auto">
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">API Keys</h1>
+            <p className="text-muted-foreground mt-1 text-lg">
+              Manage authentication keys for CI/CD pipelines, CLI, and external integrations.
+            </p>
+          </div>
+          <Dialog open={isCreateOpen} onOpenChange={(open) => {
+            setIsCreateOpen(open);
+            if (!open) {
+              setCreatedKey(null);
+              setNewKeyData({ name: "", teamId: "personal", expiresAt: "" });
+            }
+          }}>
+            <DialogTrigger asChild>
+              <Button className="bg-primary hover:bg-primary/90">
+                <Plus className="h-4 w-4 mr-2" />
+                Generate New Key
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[500px]">
+              <DialogHeader>
+                <DialogTitle>{createdKey ? "Key Generated Successfully" : "Generate API Key"}</DialogTitle>
+                <DialogDescription>
+                  {createdKey 
+                    ? "Copy this key now. For your security, it won't be shown again."
+                    : "Create a new key to access the Nobalmako API programmatically."}
+                </DialogDescription>
+              </DialogHeader>
+
+              {createdKey ? (
+                <div className="space-y-4 pt-4">
+                  <div className="flex items-center gap-2 p-4 bg-muted rounded-lg border border-primary/20">
+                    <code className="flex-1 font-mono text-sm break-all">{createdKey}</code>
+                    <Button variant="ghost" size="icon" onClick={() => copyToClipboard(createdKey)}>
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <div className="flex items-center gap-2 text-amber-600 bg-amber-50 p-3 rounded-md text-sm">
+                    <AlertCircle className="h-4 w-4 shrink-0" />
+                    <p>Make sure to copy your API key now. You won't be able to see it again.</p>
+                  </div>
+                  <DialogFooter>
+                    <Button onClick={() => setIsCreateOpen(false)} className="w-full">Done</Button>
+                  </DialogFooter>
+                </div>
+              ) : (
+                <div className="space-y-4 pt-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="name">Key Name</Label>
+                    <Input
+                      id="name"
+                      placeholder="e.g. GitHub Actions - Production"
+                      value={newKeyData.name}
+                      onChange={(e) => setNewKeyData({ ...newKeyData, name: e.target.value })}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="scope">Access Scope</Label>
+                    <Select 
+                      value={newKeyData.teamId} 
+                      onValueChange={(val) => setNewKeyData({ ...newKeyData, teamId: val })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select scope" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="personal">Personal Account</SelectItem>
+                        {teams?.map(team => (
+                          <SelectItem key={team.id} value={team.id}>{team.name} (Project)</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="expires">Expires (optional)</Label>
+                    <Input
+                      id="expires"
+                      type="date"
+                      value={newKeyData.expiresAt}
+                      onChange={(e) => setNewKeyData({ ...newKeyData, expiresAt: e.target.value })}
+                    />
+                  </div>
+                  <DialogFooter className="pt-4">
+                    <Button variant="outline" onClick={() => setIsCreateOpen(false)}>Cancel</Button>
+                    <Button onClick={handleCreate} disabled={isCreating}>
+                      {isCreating ? "Generating..." : "Generate Key"}
+                    </Button>
+                  </DialogFooter>
+                </div>
+              )}
+            </DialogContent>
+          </Dialog>
+        </div>
+
+        <Card className="shadow-sm border-muted">
+          <CardHeader>
+            <CardTitle className="text-xl flex items-center gap-2">
+              <Shield className="h-5 w-5 text-primary" />
+              Active Keys
+            </CardTitle>
+            <CardDescription>
+              A list of API keys that currently have access to your account.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="p-0">
+            <div className="overflow-x-auto">
+              {isLoading ? (
+                <div className="py-20 flex justify-center">
+                  <div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full" />
+                </div>
+              ) : apiKeys.length > 0 ? (
+                <table className="w-full text-sm text-left">
+                  <thead className="text-xs text-muted-foreground uppercase bg-muted/30">
+                    <tr>
+                      <th className="px-6 py-4 font-medium">Key Name</th>
+                      <th className="px-6 py-4 font-medium">Scope</th>
+                      <th className="px-6 py-4 font-medium">Last Used</th>
+                      <th className="px-6 py-4 font-medium">Created</th>
+                      <th className="px-6 py-4 font-medium text-right">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-border">
+                    {apiKeys.map((key) => (
+                      <tr key={key.id} className="hover:bg-muted/30 transition-colors">
+                        <td className="px-6 py-4 font-medium">
+                          <div className="flex flex-col">
+                            <span className="text-sm font-semibold">{key.name}</span>
+                            <div className="flex items-center gap-2 mt-1">
+                              <code className="text-[10px] bg-muted px-1.5 py-0.5 rounded">eg_••••••{key.id.slice(-4)}</code>
+                              {key.expiresAt && new Date(key.expiresAt) < new Date() ? (
+                                <Badge variant="destructive" className="text-[10px] h-4">Expired</Badge>
+                              ) : (
+                                <Badge variant="secondary" className="text-[10px] h-4">Active</Badge>
+                              )}
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4">
+                          <div className="flex items-center gap-1.5">
+                            {key.teamName ? (
+                              <Badge variant="outline" className="font-normal text-blue-600 bg-blue-50 border-blue-200">
+                                {key.teamName}
+                              </Badge>
+                            ) : (
+                              <Badge variant="outline" className="font-normal">Personal</Badge>
+                            )}
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 text-muted-foreground">
+                          <div className="flex items-center gap-1.5">
+                            <Clock className="h-3.5 w-3.5" />
+                            {key.lastUsed ? format(new Date(key.lastUsed), "MMM d, yyyy") : "Never"}
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 text-muted-foreground">
+                          {format(new Date(key.createdAt), "MMM d, yyyy")}
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                          <Button 
+                            variant="ghost" 
+                            size="icon" 
+                            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                            onClick={() => handleDelete(key.id)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              ) : (
+                <div className="flex flex-col items-center justify-center py-20 text-center px-4">
+                  <div className="p-4 bg-muted rounded-full mb-4">
+                    <Key className="h-8 w-8 text-muted-foreground/50" />
+                  </div>
+                  <h3 className="text-lg font-semibold mb-1">No API keys yet</h3>
+                  <p className="text-muted-foreground max-w-xs mb-6 text-sm">
+                    Generate an API key to start using Nobalmako via CLI or CI/CD.
+                  </p>
+                  <Button variant="outline" onClick={() => setIsCreateOpen(true)}>
+                    Generate My First Key
+                  </Button>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Integration Tips */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <Card className="bg-muted/20 border-border/40">
+            <CardHeader>
+              <CardTitle className="text-sm">Quick Setup</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <p className="text-xs text-muted-foreground">Authenticate your CI/CD pipeline using the API key:</p>
+                <div className="bg-zinc-950 p-4 rounded-lg font-mono text-[11px] text-zinc-300">
+                  <span className="text-zinc-500"># Set as environment variable</span><br/>
+                  export NOBALMAKO_TOKEN="your_api_key_here"<br/><br/>
+                  <span className="text-zinc-500"># Download variables</span><br/>
+                  nobalmako pull --project my-app --env prod
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          
+          <Card className="bg-muted/20 border-border/40">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0">
+              <CardTitle className="text-sm">API Reference</CardTitle>
+              <Link href="/api-reference" className="text-[10px] text-primary hover:underline flex items-center gap-1 font-medium">
+                Full Docs <ArrowRight className="h-2 w-2" />
+              </Link>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <p className="text-xs text-muted-foreground">Fetch variables directly via HTTP:</p>
+                <div className="bg-zinc-950 p-4 rounded-lg font-mono text-[11px] text-zinc-300 overflow-x-auto whitespace-pre">
+<span className="text-emerald-400">GET</span> /api/variables?teamId=...<br/>
+<span className="text-zinc-500">Headers:</span><br/>
+  Authorization: Bearer <span className="text-sky-400">your_api_key</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}

package/src/app/api-keys/page.tsx

@@ -0,0 +1,10 @@
+import APIKeysClient from "./APIKeysClient";
+
+export const metadata = {
+  title: "API Keys - Nobalmako",
+  description: "Manage your API keys for external access",
+};
+
+export default function APIKeysPage() {
+  return <APIKeysClient />;
+}

package/src/app/api-reference/page.tsx

@@ -0,0 +1,324 @@
+'use client';
+
+import AppLayout from "@/components/AppLayout";
+import { Badge } from "@/components/ui/badge";
+import { Terminal, Copy, Globe, Lock, Code, Check } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+
+export default function ApiReferencePage() {
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const copyToClipboard = (text: string, id: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(id);
+    setTimeout(() => setCopied(null), 2000);
+  };
+
+  const endpoints = [
+    {
+      method: "GET",
+      path: "/api/variables",
+      description: "List all environment variables for a team and environment.",
+      params: [
+        { name: "teamId", type: "UUID", required: true, description: "The ID of the project" },
+        { name: "environmentId", type: "UUID", required: true, description: "The ID of the environment" },
+      ],
+      response: `{
+  "variables": [
+    {
+      "id": "uuid",
+      "key": "DATABASE_URL",
+      "value": "postgres://...",
+      "isSecret": true
+    }
+  ]
+}`
+    },
+    {
+      method: "POST",
+      path: "/api/variables",
+      description: "Create a new environment variable.",
+      body: `{
+  "teamId": "uuid",
+  "environmentId": "uuid",
+  "key": "API_KEY",
+  "value": "secret_value",
+  "isSecret": true
+}`,
+      response: `{
+  "success": true,
+  "variable": { "id": "uuid", "key": "API_KEY" }
+}`
+    },
+    {
+      method: "GET",
+      path: "/api/environments",
+      description: "Get all environments for a specific project.",
+      params: [
+        { name: "teamId", type: "UUID", required: true, description: "The project ID" },
+      ],
+      response: `{
+  "environments": [
+    { "id": "uuid", "name": "Production", "color": "#ef4444" },
+    { "id": "uuid", "name": "Staging", "color": "#f59e0b" }
+  ]
+}`
+    },
+    {
+      method: "GET",
+      path: "/api/audit-logs",
+      description: "Retrieve security audit logs for a project.",
+      params: [
+        { name: "teamId", type: "UUID", required: true, description: "The project ID" },
+        { name: "limit", type: "number", required: false, description: "Number of logs to return (default: 50)" },
+      ],
+      response: `{
+  "logs": [
+    {
+      "id": "uuid",
+      "action": "update",
+      "resourceType": "variable",
+      "userName": "John Doe",
+      "createdAt": "2026-01-31T12:00:00Z"
+    }
+  ]
+}`
+    }
+  ];
+
+  return (
+    <AppLayout>
+      <div className="max-w-6xl mx-auto py-10 px-6 sm:px-8">
+        <header className="mb-14 border-b pb-8">
+          <Badge className="mb-4 bg-primary/10 text-primary border-primary/20 hover:bg-primary/20" variant="outline">REST API v1.0</Badge>
+          <h1 className="text-5xl font-extrabold tracking-tight mb-4 text-foreground ">API Reference</h1>
+          <p className="text-xl text-muted-foreground max-w-2xl">
+            Integrate Nobalmako into your own tools and CI/CD pipelines with our secure, developer-friendly REST API.
+          </p>
+        </header>
+
+        <div className="flex flex-col lg:flex-row gap-16">
+          {/* Sidebar Navigation */}
+          <aside className="lg:w-64 shrink-0">
+            <nav className="sticky top-28 space-y-8">
+              <div>
+                <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em] mb-4 px-2">Introduction</p>
+                <div className="space-y-1">
+                  <a href="#authentication" className="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-all">
+                    <Lock className="mr-3 h-4 w-4 opacity-50 group-hover:opacity-100" />
+                    Authentication
+                  </a>
+                  <a href="#base-url" className="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-all">
+                    <Globe className="mr-3 h-4 w-4 opacity-50 group-hover:opacity-100" />
+                    Base URL
+                  </a>
+                </div>
+              </div>
+              
+              <div>
+                <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em] mb-4 px-2">Endpoints</p>
+                <div className="space-y-1">
+                  <a href="#variables" className="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-all">
+                    <Code className="mr-3 h-4 w-4 opacity-50 group-hover:opacity-100" />
+                    Variables
+                  </a>
+                  <a href="#cli-installation" className="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-all">
+                    <Terminal className="mr-3 h-4 w-4 opacity-50 group-hover:opacity-100" />
+                    CLI Installation
+                  </a>
+                </div>
+              </div>
+            </nav>
+          </aside>
+
+          {/* Content */}
+          <div className="flex-1 max-w-4xl space-y-24">
+            <section id="authentication" className="scroll-mt-28">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="p-2 bg-primary/10 rounded-lg">
+                  <Lock className="h-6 w-6 text-primary" />
+                </div>
+                <h2 className="text-3xl font-bold text-foreground ">Authentication</h2>
+              </div>
+              <div className="prose  max-w-none prose-p:text-muted-foreground">
+                <p className="text-lg leading-relaxed">
+                  All API requests must include an <code>Authorization</code> header with your personal API key. 
+                  Generate and manage your keys in the <a href="/api-keys" className="text-primary font-semibold hover:underline decoration-primary/30 underline-offset-4">API Keys dashboard</a>.
+                </p>
+                
+                <div className="mt-8 bg-slate-50 rounded-xl overflow-hidden shadow-sm border border-border">
+                  <div className="px-4 py-2 border-b border-border bg-slate-100/50 flex items-center">
+                    <span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">HTTP Header</span>
+                  </div>
+                  <div className="p-6 font-mono text-sm relative group">
+                    <span className="text-slate-500 font-bold">Authorization:</span><span className="text-slate-900"> Bearer </span><span className="text-emerald-600 font-semibold">YOUR_API_KEY</span>
+                    <Button 
+                      variant="ghost" 
+                      size="icon" 
+                      className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity text-slate-400 hover:text-slate-900 hover:bg-slate-200 h-8 w-8"
+                      onClick={() => copyToClipboard('Authorization: Bearer YOUR_API_KEY', 'auth')}
+                    >
+                      {copied === 'auth' ? <Check className="h-4 w-4 text-emerald-600" /> : <Copy className="h-4 w-4" />}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section id="base-url" className="scroll-mt-28">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="p-2 bg-primary/10 rounded-lg">
+                  <Globe className="h-6 w-6 text-primary" />
+                </div>
+                <h2 className="text-3xl font-bold text-foreground ">Base URL</h2>
+              </div>
+              <div className="prose  max-w-none prose-p:text-muted-foreground">
+                <p className="text-lg leading-relaxed">
+                  All API requests should be made to our globally distributed edge network using the following base URL:
+                </p>
+                <div className="mt-8 bg-slate-50 rounded-xl overflow-hidden shadow-sm border border-border">
+                  <div className="px-4 py-2 border-b border-border bg-slate-100/50 flex items-center">
+                    <span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Live Endpoint</span>
+                  </div>
+                  <div className="p-6 font-mono text-sm relative group">
+                    <span className="text-emerald-700 font-medium selection:bg-emerald-100">https://nobalmako.com/api</span>
+                    <Button 
+                      variant="ghost" 
+                      size="icon" 
+                      className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity text-slate-400 hover:text-slate-900 hover:bg-slate-200 h-8 w-8"
+                      onClick={() => copyToClipboard('https://nobalmako.com/api', 'base-url')}
+                    >
+                      {copied === 'base-url' ? <Check className="h-4 w-4 text-emerald-600" /> : <Copy className="h-4 w-4" />}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <div className="h-px bg-border/60" />
+
+            <section id="variables" className="scroll-mt-28 space-y-10">
+              <header>
+                <h2 className="text-3xl font-bold text-foreground  mb-2">Variables</h2>
+                <p className="text-muted-foreground text-lg">Programmatically manage your project-level environment variables.</p>
+              </header>
+
+              <div className="space-y-16">
+                {endpoints.map((endpoint, i) => (
+                  <div key={i} className="group/endpoint">
+                    <div className="flex items-center gap-4 mb-6">
+                      <Badge 
+                        variant="outline" 
+                        className={`font-mono px-3 py-1 text-xs font-bold uppercase tracking-wider ${
+                          endpoint.method === 'GET' ? 'bg-blue-600/10 text-blue-600  border-blue-600/30' : 
+                          endpoint.method === 'POST' ? 'bg-emerald-600/10 text-emerald-600  border-emerald-600/30' : ''
+                        }`}
+                      >
+                        {endpoint.method}
+                      </Badge>
+                      <code className="text-sm font-bold font-mono text-foreground tracking-tight py-1 px-3 bg-muted rounded-md">{endpoint.path}</code>
+                    </div>
+
+                    <div className="grid lg:grid-cols-2 gap-10">
+                      <div className="space-y-8">
+                        <div>
+                          <p className="text-base text-muted-foreground leading-relaxed">{endpoint.description}</p>
+                        </div>
+                        
+                        {endpoint.params && (
+                          <div className="space-y-4">
+                            <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em] px-1">Parameters</p>
+                            <div className="space-y-2">
+                              {endpoint.params.map((p, j) => (
+                                <div key={j} className="flex flex-col gap-1.5 p-4 rounded-xl bg-muted/40 border border-border/50 hover:bg-muted/60 transition-colors">
+                                  <div className="flex items-center justify-between">
+                                    <code className="text-primary font-bold text-sm tracking-tight">{p.name}</code>
+                                    <span className="text-[10px] font-mono font-semibold text-muted-foreground/70 uppercase">
+                                      {p.type}{p.required ? '*' : ''}
+                                    </span>
+                                  </div>
+                                  <p className="text-xs text-muted-foreground leading-relaxed">{p.description}</p>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {endpoint.body && (
+                          <div className="space-y-4">
+                            <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em] px-1">Request Payload</p>
+                            <div className="relative group/code">
+                              <pre className="bg-slate-50 p-6 rounded-2xl text-xs text-slate-800 overflow-x-auto border border-border leading-relaxed font-mono shadow-sm">
+                                {endpoint.body}
+                              </pre>
+                              <Button 
+                                variant="ghost" 
+                                size="icon" 
+                                className="absolute top-4 right-4 opacity-0 group-hover/code:opacity-100 transition-opacity text-slate-400 hover:text-slate-900 hover:bg-slate-200 h-8 w-8"
+                                onClick={() => copyToClipboard(endpoint.body!, `body-${i}`)}
+                              >
+                                {copied === `body-${i}` ? <Check className="h-4 w-4 text-emerald-600" /> : <Copy className="h-4 w-4" />}
+                              </Button>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                      
+                      <div className="space-y-4">
+                        <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em] px-1">Response Sample</p>
+                        <div className="relative group/code">
+                          <pre className="bg-slate-50 p-6 rounded-2xl text-xs text-slate-800 overflow-x-auto border border-border leading-relaxed font-mono shadow-sm">
+                            {endpoint.response}
+                          </pre>
+                          <Button 
+                            variant="ghost" 
+                            size="icon" 
+                            className="absolute top-4 right-4 opacity-0 group-hover/code:opacity-100 transition-opacity text-slate-400 hover:text-slate-900 hover:bg-slate-200 h-8 w-8"
+                            onClick={() => copyToClipboard(endpoint.response, `resp-${i}`)}
+                          >
+                            {copied === `resp-${i}` ? <Check className="h-4 w-4 text-emerald-600" /> : <Copy className="h-4 w-4" />}
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <div className="p-10 bg-slate-50 rounded-[2rem] text-slate-900 border border-border shadow-sm mt-16 relative overflow-hidden group">
+              <div className="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-[100px] -mr-32 -mt-32" />
+              
+              <h3 className="text-2xl font-bold mb-8 flex items-center gap-4 relative z-10">
+                <div className="p-2 bg-primary/10 rounded-xl">
+                  <Terminal className="h-6 w-6 text-primary" />
+                </div>
+                Quick Start: cURL
+              </h3>
+              
+              <div className="relative group/code z-10">
+                <pre className="bg-white p-6 rounded-2xl font-mono text-sm overflow-x-auto border border-border leading-relaxed shadow-inner">
+                  <span className="text-emerald-600 font-medium">curl</span> <span className="text-slate-500">-X</span> <span className="text-slate-900">GET </span><span className="text-blue-600 font-medium">"https://nobalmako.com/api/variables?teamId=123&envId=456"</span> \<br />
+                  &nbsp;&nbsp;<span className="text-slate-500 font-medium">-H</span> <span className="text-blue-600 font-medium">"Authorization: Bearer {'$'}{'{'}NOBALMAKO_TOKEN{'}'}"</span>
+                </pre>
+                <Button 
+                  variant="ghost" 
+                  size="icon" 
+                  className="absolute top-4 right-4 opacity-0 group-hover/code:opacity-100 transition-opacity text-slate-400 hover:text-slate-900 hover:bg-slate-100 h-8 w-8"
+                  onClick={() => copyToClipboard(`curl -X GET "https://nobalmako.com/api/variables?teamId=123&envId=456" \\\n  -H "Authorization: Bearer \${NOBALMAKO_TOKEN}"`, 'curl')}
+                >
+                  {copied === 'curl' ? <Check className="h-4 w-4 text-emerald-600" /> : <Copy className="h-4 w-4" />}
+                </Button>
+              </div>
+              
+              <p className="mt-6 text-sm text-slate-500 relative z-10">
+                Replace <code>NOBALMAKO_TOKEN</code> with your actual API key to start pulling secrets instantly.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}