VIBN Frontend for Coolify deployment

components/layout/page-header.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ChevronRight, Info } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface PageHeaderProps {
+  projectId: string;
+  projectName?: string;
+  projectEmoji?: string;
+  pageName: string;
+}
+
+export function PageHeader({
+  projectId,
+  projectName = "AI Proxy",
+  projectEmoji = "🤖",
+  pageName,
+}: PageHeaderProps) {
+  return (
+    <div className="flex h-12 items-center justify-between border-b bg-card/50 px-6">
+      {/* Breadcrumbs */}
+      <div className="flex items-center gap-2 text-sm">
+        <span className="text-base">{projectEmoji}</span>
+        <span className="font-medium">{projectName}</span>
+        <ChevronRight className="h-4 w-4 text-muted-foreground" />
+        <span className="text-muted-foreground">{pageName}</span>
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <Info className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+